Creating a cascading dropdown in sharepoint - sharepoint

Question

How do I go about creating a cascading drop-down within a list in Office 365 SharePoint?
For instance, if you have a country drop-down and you select United States, you get the 50 states listed. Then if you select Maryland, you get the cities within that state.

Answer 1

You can use Info Path form which make very easy for cascading and if you do not want to use Infopath you have to use Jquery CSOM or REST API in the form where you want to use cascading.
Please go through below link for more information :
http://www.markrackley.net/2014/05/20/cascading-drop-down-lists-in-sharepoint-office-365-using-rest/
https://spservices.codeplex.com/wikipage?title=%24%28%29.SPServices.SPCascadeDropdowns

Answer 2

You can use REST API to implement Cascading Drop down in SharePoint. Step by step article link: Cascading drop down in SharePoint using REST API
//Function to filter the values of Drink Types
function loadDrinkTypes(selectedDrink) {
var drinkTypeListName = "Drink Type";
var drinkTypeListURL = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + drinkTypeListName + "')/items?$select=Title,Drink/Title,Drink/Id&$expand=Drink&$filter=Drink/Title eq '" + selectedDrink + "'";
getReqData(drinkTypeListURL, function (data) {
var items = data.d.results;
if (items.length > 0) {
var optionsAsString = '<option value=""></option>';
for (var i = 0; i < items.length; i++) {
optionsAsString += "<option value='" + items[i].Title + "'>" + items[i].Title + "</option>";
}
$('select[title="Drink Type"]').html(optionsAsString);
}
},
function (data) {
//alert("Some error occurred in getting Drink Types");
});
}
//JQuery AJAX to access REST API JSON data
function getReqData(reqUrl, success, failure) {
$.ajax({
url: reqUrl,
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
success(data);
},
error: function (data) {
failure(data);
}
});
}