Sharepoint - Cascading Drop down in SharePoint Online
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:
- https://spservices.codeplex.com/wikipage?title=%24%28%29.SPServices.SPCascadeDropdowns
- http://www.itidea.nl/index.php/cascading-dropdowns-with-jquery-and-spservices-on-a-page-or-webpart/
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
https://spservices.codeplex.com/wikipage?title=%24().SPServices.SPCascadeDropdowns&referringTitle=Documentation
Hope it helps..