Bind SharePoint list items to dropdownlist using Rest api and jQuery

This SharePoint Rest API tutorial explains, how to bind sharepoint list items to dropdownlist using rest api and jQuery.

SharePoint 2013/2016/Online has greatly expanded the REST services available to developers. With this, we have much more SharePoint functionality exposed via CSOM and Web Services.

Also, all of the new REST Services in SharePoint 2013. SharePoint 2013 was able to provide me with a REST API, I could call with jQuery ajax requests, and this was exactly what I wanted.

In this SharePoint Rest API tutorial, we will discuss how we can bind SharePoint list items to dropdown list using rest api in SharePoint 2013.

Bind SharePoint list items to dropdownlist using Rest api

Let’s start out with our basic get commands in REST. Below is a list of the basic commands used to get List Items from a SharePoint List through the SharePoint 2013 REST Services.

Bind SharePoint list items to dropdownlist using Rest api

In my example, I’m accessing a Custom list(countries) and output the result binding it to a dynamical dropdown. I have ordered by column in Ascending only. Using SharePoint’s REST API lets us add these filters in our request. The results are given to us as a JSON object, which we can then loop through and insert into a dropdown runtime.

I also used a modular pattern to structure my code. We can generate our REST request. _spPageContextInfo is a SharePoint object that gives us useful information about the page and site we’re on, including the base URL of our site.

After successfully getting our list information, we just need to loop through our data, put it in a dropdown, and then insert into our predefined container element. jQuery helps make this an easy process.

Let’s proceed.

Step-1: Navigate to your SharePoint 2013 site.

Step-2: From this page select the Site Actions | Edit Page.

Edit the page, go to the “Insert” tab in the Ribbon and click the “Web Part” option. In the “Web Parts” picker area, go to the “Media and Content” category, select the Script Editor Web Part and press the “Add button”.

Step-3: Once the Web Part is inserted into the page, you will see an “EDIT SNIPPET” link; click it. You can insert the HTML and/or JavaScript as in the following.

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function () {
countriesDrpDownBind();
});

function countriesDrpDownBind() {
var listName = "countries";
var url = _spPageContextInfo.webAbsoluteUrl;
getListItems(listName, url, function (data) {
var items = data.d.results;
var inputElement = '<select id="drpcountries"> <option value="">Select</option>';
// Add all the new items

for (var i = 0; i < items.length; i++) {
var itemId = items[i].Title,
itemVal = items[i].Title;
inputElement += '<option value="' + itemId + '"selected>' + itemId + '</option>';
}

inputElement += '</select>';
$('#divisiondrp').append(inputElement);
$("#drpcountries").each(function () {
$('option', this).each(function () {
if ($(this).text() == 'Select') {
$(this).attr('selected', 'selected')
};
});
});

// assign the change event to provide an alert of the selected option value
$('#drpcountries').on('change', function () {
alert($(this).val());
});
}, function (data) {
alert("Ooops, an error occured. Please try again");
});
}

// READ operation
// listName: The name of the list you want to get items from
// siteurl: The url of the site that the list is in.
// success: The function to execute if the call is sucesfull
// failure: The function to execute if the call fails

function getListItems(listName, siteurl, success, failure) {
$.ajax({
url: siteurl + "/_api/web/lists/getbytitle('" + listName + "')/items?$orderby=Title asc",
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
success(data);
},

error: function (data) {
failure(data);
}
});
}
</script>

Division
<div id="divisiondrp"></div>

Now, you can see the items bind to the SharePoint list items using Rest API and jQuery.

bind sharepoint list items to dropdownlist using rest api

You may like following SharePoint Rest API tutorials:

This SharePoint tutorial, we learned how to bind sharepoint list items to the dropdown list using rest api and jQuery. The same Rest API code, we can use to bind sharepoint list items to the dropdown list using rest api and jQuery in SharePoint 2013/2016.

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

>