I'm trying to implement cascading drop down for list in SharePoint online I have 3 different list with name Countries , States, cities. and the master list Address in which I have Fields Country , State, City.
I'm trying to display Sates for selected country. and City for selected States in SharePoint Online list
You can do Cascading dropdown using SPServices library.
Try this below code:
Just add jquery-1.8.2.js and jquery.SPServices-0.7.2.min.js into style library and give proper source link in below code.
<script language="javascript" type="text/javascript" src="../../jQuery%20Libraries/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript" src="../../jQuery%20Libraries/jquery.SPServices-0.7.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$().SPServices.SPCascadeDropdowns({
relationshipList: "State",
relationshipListParentColumn: "Country",
relationshipListChildColumn: "Title",
parentColumn: "Country",
childColumn: "State",
debug: true
});
$().SPServices.SPCascadeDropdowns({
relationshipList: "City",
relationshipListParentColumn: "State",
relationshipListChildColumn: "Title",
relationshipListSortColumn: "ID",
parentColumn: "State",
childColumn: "City"
});
});
</script>
Get more reference from below links:
You can also achieve this using REST api. More info in this link.
Try below code:
<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
HillbillyCascade({
parentFormField: "State", //Display name on form of field from parent list
childList: "Cities", //List name of child list
childLookupField: "Title", //Internal field name in Child List used in lookup
childFormField: "City", //Display name on form of the child field
parentFieldInChildList: "State" //Internal field name in Child List of the parent field
});
});
function HillbillyCascade(params)
{
var parent = $("select[Title='"+params.parentFormField+"'], select[Title='"+
params.parentFormField+" Required Field']");
$(parent).change(function(){
DoHillbillyCascade(this.value,params);
});
var currentParent = $(parent).val();
if (currentParent != 0)
{
DoHillbillyCascade(currentParent,params);
}
}
function DoHillbillyCascade(parentID,params)
{
var child = $("select[Title='"+params.childFormField+"'], select[Title='"+
params.childFormField+" Required Field']," +
"select[Title='"+params.childFormField+" possible values']");
$(child).empty();
var options = "";
var call = $.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('"+params.childList+
"')/items?$select=Id,"+params.childLookupField+","+params.parentFieldInChildList+
"/Id&$expand="+params.parentFieldInChildList+"/Id&$filter="+params.parentFieldInChildList+
"/Id eq "+ parentID,
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
}
});
call.done(function (data,textStatus, jqXHR){
for (index in data.d.results)
{
options += "<option value='"+ data.d.results[index].Id +"'>"+
data.d.results[index][params.childLookupField]+"</option>";
}
$(child).append(options);
});
call.fail(function (jqXHR,textStatus,errorThrown){
alert("Error retrieving information from list: " + params.childList + jqXHR.responseText);
$(child).append(options);
});
}
</script>
There is no such OOTB functinality.I have used SPservices SPCascadeDropdowns api.
Following is the link
Hope it helps..
3 Level Cascading drop down SharePoint step by step using jquery. https://youtu.be/yBytlB1yTtM
I used the REST api give in this page, and it works great for the new form (Thank you so much, exactly what i was looking for)
However I want to use the same functionality for the edit form as well. Tried the same script and it does not work. ( No Error message- ) Any suggestions on how to achieve this with edit form.
