Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
Introduction
This feature is not available out-of-the-box in SharePoint. Take two drop-downs in your custom page (content editor web part) as:
<select id="ddlCountry"></select> and other drop-down for state <select id="ddlState"></select>
Implementation
Open the SPD 2013 and put the below code just under the first tag </SharePoint:UIVersionedContent>:
<script type="text/javascript" src="../../SiteAssets/jquery-1.11.0.min.wbr>js"></script> [Click here to download this library]
<script type="text/javascript" src="../../SiteAssets/jquery.SPServices-2014.02.min.js"></script> [Click here to download this library]
<script type="text/javascript" >
$(document).ready(function()
{
$("select[title= 'ddlCountry']").empty(); // do empty the first dropdown(country) on page load
bindDDLCountry();
//The on change event of Dropdown country
$("select[title= 'ddlCountry']").change(function()
{
var ddlCountrySelectedValue = $("select[title= 'ddlCountry'] option:selected").val();
if((ddlCountrySelectedValue != null) || (ddlCountrySelectedValue != 0 ))
{
getCascadingState(ddlCountrySelectedValue ); //Invoke this function for cascading states based on selected country
}
});//Closing of on Change Event of Dropdown country
});//closing of ready function
function bindDDLCountry()
{
var webServerURL = _spPageContextInfo.webServerRelativeUrl+"/"; //It takes full url as: https://ServerName.sharepoint.com/sites/SiteColl/SubSite
var camlQuerytext="";
$().SPServices({
operation: "GetListItems",
async: false,
listName: "CountryLst",
webURL: webServerURL,
CAMLRowLimit: 0,
CAMLViewFields: "<ViewFields><FieldRef Name='CountryName' /></ViewFields>",
CAMLQuery: camlQuerytext,
completefunc: function (xData, Status){
$("select[title= 'C1']").append($("<option></option>").val("0").html("-Select Country-"));
$(xData.responseXML).SPFilterNode("z:row").each(function(){
var countryname = $(this).attr("ows_CountryName");
$("select[title= 'ddlCountry']").append($("<option></option>").val(countryname.replace('&','&')).html(countryname.replace('&','&')));
});//Closing of each function
}//Closing of completefunc function
});//Closing of SPServices
}
function getCascadingState(ddlCountrySelectedValue)
{
$("select[title= 'ddlState']").empty(); // do empty the second dropdown(state) here
var webServerURL = _spPageContextInfo.webServerRelativeUrl+"/";
var camlQuerytext="";
if(ddlCountrySelectedValue !="")
{
camlQuerytext="<Query><Where><Eq><FieldRef Name='CountryName' /><Value Type='Lookup'>"+ddlCountrySelectedValue+"</Value></Eq></Where </Query>";
}
else
{
camlQuerytext="<Query><OrderBy><FieldRef Name='ID' Ascending='FALSE' /></OrderBy></Query>";
}
$().SPServices({
operation: "GetListItems",
async: false,
listName: "StateLst",
webURL: webServerURL,
CAMLRowLimit: 0,
CAMLViewFields: "<ViewFields><FieldRef Name='StateName' /></ViewFields>",
CAMLQuery: camlQuerytext,
completefunc: function (xData, Status){
$(xData.responseXML).SPFilterNode("z:row").each(function(){
var statename = $(this).attr("ows_StateName");
$("select[title= 'ddlState']").append($("<option></option>").val(statename).html(statename));
});//Closing of each function
}//Closing of completefunc function
});//Closing of SPServices function
}
Output
