Bind SharePoint list items to dropdownlist and cascading dropdown using JavaScript and jQuery

This SharePoint tutorial will discuss how to bind SharePoint list items to the dropdown list using JavaScript and jQuery. The same code, we can use to bind list items to the dropdown list using JavaScript in SharePoint Online as well as SharePoint 2013/2016 or SharePoint 2019.

We will also see how to implement cascading dropdown in sharepoint using jquery and javascript.

Bind SharePoint list items to dropdownlist using JavaScript

Here we have taken a SharePoint list with country names that we need to bind to a drop-down list in a web part page in SharePoint Online.

Here, I have also created an HTML file were added all the jQuery files. In this Html file, we have created a Dropdown list and have not added an option to the drop-down list, because we will bind the dropdown list at runtime using JSOM (JavaScript object model).

Here I have created a SharePoint list, name as DemoList. It has one column as Country and also I have inserted a few items to the SharePoint list. The list looks like below:

bind sharepoint list items to dropdownlist using javascript

HTML Code:

Below is my HTML file which is having the jQuery file references and also I have added an HTML dropdown like below:

Here, also I have given the reference to my custom .js file which contains by JavaScript code.

<!DOCTYPE HTML>
<HTML>
<head>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Bihusdevelopment2/DropDownbindingfromlistonpageload.js"></script>
</head>
<body id="body">
<select id="ddlcountry">
</select>
</body>
</html>

JSOM code to bind SharePoint list items to dropdown on pageload:

Below is the full JavaScript code to bind sharepoint list items to dropdownlist using javascript.

$(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
});

var collListItem;
function retrieveListItems() {
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('DemoList');
var camlQuery = new SP.CamlQuery();
collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded(sender, args) {
var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
$("#ddlcountry").append('<option>' + oListItem.get_item('Title') + '</option>')
}
}

function onQueryFailed(sender, args) {
alert('Error: ' + args.get_message() + '\n' + args.get_stackTrace());
}

Once you save the code in a content editor web part or script editor web part, you can see the dropdownlist will be populated from the sharePoint list.

populate dropdown from sharepoint list using javascript

Cascading dropdown in sharepoint using jQuery and JavaScript

Now, we will see how to do cascading dropdown in sharepoint using jquery and javascript.

Here we have a requirement where we have two SharePoint lists as Country and State list. There will be multiple states under a country, so the State list contains a lookup column as a country.

Two dropdown list I have created in HTML form. Now we have to bind the SharePoint country list to a drop-down on page load, and when the country is selected it should only populate corresponding states. We need to cascade country dropdown to state dropdown.

Here we have created a SharePoint custom list and a column as CountryNames which looks as below:

cascading dropdown in sharepoint using jquery

Now we need to create a SharePoint list as State List with a lookup column as a country and have used the default Title column as to enter a state. The State List looks as below:

cascading dropdown in sharepoint 2013 using javascript

Now we need to bind the list items to a dropdown list. For this we need to create two HTML drop-down lists.

HTML Code:

Here we have taken two drop-down lists. We have not added an option to the dropdownlist, because we will bind the dropdown list at run time from the respective SharePoint lists which we have created. We also need to pass JSOM reference and JQuery file reference. Check the below code

<!DOCTYPE HTML>
<HTML>
<head>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Bihusdevelopment2/CountryAndStates.js"></script>
</head>
<body id="body">
Countries<select id="ddlcountry">
</select><br>
States<select id="ddlstate">
</select>
</body>
</html>

Bind Dropdownlist from SharePoint list using jQuery

We have now two dropdown list one is country other is states. Country needs to bind on page load. So to bind the country list we have created the below method.

var CountrycollListItem;

function retrieveListItems() {
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('CountryList');
var camlQuery = new SP.CamlQuery();
CountrycollListItem = oList.getItems(camlQuery);
clientContext.load(CountrycollListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded(sender, args) {
var listItemEnumerator = CountrycollListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
$("#ddlcountry").append('<option>' + oListItem.get_item('Title') + '</option>');
}
}
function onQueryFailed(sender, args) {
alert('Error: ' + args.get_message() + '\n' + args.get_stackTrace());
}

Now we need to bind State list. To bind State List we need CAML query to retrieve particular states names when we choose Country name from the dropdown list. We have created the below method and the method is called after the country method is called.

var statecollListItem;
function retriveStatelist() {
var countryname= $("#ddlcountry option:selected").text();
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('StateList');
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml("<View><Query><Where><Eq><FieldRef Name='Country' /><Value Type='Lookup'>"+countryname+"</Value></Eq></Where></Query><ViewFields><FieldRef Name='Title' /><FieldRef Name='Country' /></ViewFields><QueryOptions /></View>");
statecollListItem = oList.getItems(camlQuery);
clientContext.load(statecollListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQueryStateSucceeded),
Function.createDelegate(this, this.onStateQueryFailed));
}

function onQueryStateSucceeded(sender, args) {
var listItemEnumerator = statecollListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
$("#ddlstate").append('<option>' + oListItem.get_item('Title') + '</option>');
}
}
function onStateQueryFailed(sender, args) {
alert('Error: ' + args.get_message() + '\n' + args.get_stackTrace());
}

.empty(): The method is used to remove elements without destroying their data or event handlers. Multiple state values appear as when we select different countries, so if we will not execute this method we will find multiple state names in the dropdown.

Below is complete JSOM code to display country drop down and when a country is selected shows corrosponding states.

$(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
$('#ddlcountry').change(function() {
retriveStatelist();
$('#ddlstate').empty();
});
});
var CountrycollListItem;
function retrieveListItems() {
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('CountryList');
var camlQuery = new SP.CamlQuery();
CountrycollListItem = oList.getItems(camlQuery);
clientContext.load(CountrycollListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded(sender, args) {
var listItemEnumerator = CountrycollListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
$("#ddlcountry").append('<option>' + oListItem.get_item('Title') + '</option>');
}
}
function onQueryFailed(sender, args) {
alert('Error: ' + args.get_message() + '\n' + args.get_stackTrace());
}
var statecollListItem;
function retriveStatelist() {
var countryname= $("#ddlcountry option:selected").text();
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('StateList');
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml("<View><Query><Where><Eq><FieldRef Name='Country' /><Value Type='Lookup'>"+countryname+"</Value></Eq></Where></Query><ViewFields><FieldRef Name='Title' /><FieldRef Name='Country' /></ViewFields><QueryOptions /></View>");
statecollListItem = oList.getItems(camlQuery);
clientContext.load(statecollListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQueryStateSucceeded),
Function.createDelegate(this, this.onStateQueryFailed));
}

function onQueryStateSucceeded(sender, args) {
var listItemEnumerator = statecollListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
$("#ddlstate").append('<option>' + oListItem.get_item('Title') + '</option>');
}
}
function onStateQueryFailed(sender, args) {
alert('Error: ' + args.get_message() + '\n' + args.get_stackTrace());
}

You may like following SharePoint tutorials:

This SharePoint tutorial, we learned how to bind sharepoint list items to dropdownlist using javascript and jQuery. We also saw how to bind cascading dropdown in sharepoint using javascript or jQuery.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

  • >