In this SharePoint tutorial, we will discuss on cascading drop down list in sharepoint 2013 using jquery. How we can implement sharepoint 2013 cascading dropdown using jquery.
We will also see sharepoint 2010 cascading drop down example using jQuery.
We will also see, to bind list items to the dropdown list using JavaScript in SharePoint Online or SharePoint 2013/2016/2019.
Let us see, see how to implement cascading dropdown in sharepoint using jquery and 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:
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.
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:
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:
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());
}This is how we can implement sharepoint online cascading dropdown or sharepoint 2013 cascading dropdown using jquery.
Here, 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.
SharePoint doesn’t provide any way to do cascading dropdowns in list forms out-of-the-box.
A few examples of how this could be used are, to filter countries based on contents selected, filtering City based on Country, filtering departments based on divisions, filtering parts based on the model a vehicle and many more.
Here is the step-by-step implementation of one-level and two-level cascading of a dropdown list in SharePoint.
One-Level Dropdown Cascading:
Use the following procedure.
Two custom lists (one for the continent and another one for the country).
Continent List:
Country List:
Document Library where to save your code:
SPSServices jQuery (you can download it from here: http://spservices.codeplex.com/releases)
<script language="javascript" type="text/javascript" src="/JSLibrary/JQuery/jquery-1.7.2.min.js"></script>
<script language="javascript" type="text/javascript" src="/JSLibrary/JQuery/jquery.SPServices-0.7.1a.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$().SPServices.SPCascadeDropdowns({
relationshipList: "Country", relationshipListParentColumn: "Continent", relationshipListChildColumn: "Title", parentColumn: "Continent", childColumn: "Country", debug: true
});
});</script>Document Library or list that will use the preceding created custom lists (I am using World Location):
Two Level Dropdown Cascading:
Further, for two levels add another List (City).
Code:
<script language="javascript" type="text/javascript" src="/JSLibrary/JQuery/jquery-1.7.2.min.js"></script>
<script language="javascript" type="text/javascript" src="/JSLibrary/JQuery/jquery.SPServices-0.7.1a.min.js"></script>
<script language="javascript" type="text/javascript"> $(document).ready(function () {
$().SPServices.SPCascadeDropdowns({ relationshipList: "Country", relationshipListParentColumn: "Continent", relationshipListChildColumn: "Title", parentColumn: "Continent", childColumn: "Country", debug: true });
$().SPServices.SPCascadeDropdowns({
relationshipList: "City",
relationshipListParentColumn: "Country",
relationshipListChildColumn: "Title",
parentColumn: "Country",
childColumn: "City",
debug: true
});
});</script>
</script>The final Two Level Cascading is as below:
You may like following SharePoint tutorials:
- SharePoint ULS Logs
- SharePoint web application
- SharePoint modern list view customization example
- SharePoint list title column remove
- SharePoint crud operations using jsom
This tutorial, we learned how to do cascading dropdown in sharepoint list using jquery.
