Multi Level Cascading Dropdown for Sharepoint Online using REST Api

Hello Friends, in this tutorial we are going to implement Multi Level Cascading Dropdown in SharePoint Online custom Bootstrap form using REST api.

Multi Level Cascading Dropdown in SharePoint Online using REST

We have one list for City which has only one column named Title.

List Name : City
List Name : City

We have one list for State which has only one column named Title

List Name: State
List Name: States

We have one master list for all (Country, state and City) in which we are storing country values in Title field, State is a lookup field in which data is coming from State list, City is also a lookup column in which data is coming fom City list.

List Name: CountryStateCity
List Name: CountryStateCity

We have one custom bootstrap form in which we have 3 dropdowns which are Multi Level Cascading Dropdown, Country, State and City.

Html code:

<html>

<head>
 <title>Contact Form Tutorial by Bootstrapious.com</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="../CustomCode/referenceFiles/bootstrap.min.css" rel="stylesheet">
 <link href='../CustomCode/referenceFiles/googleFonts.css' rel='stylesheet' type='text/css'>
 <link href="../CustomCode/css/CustomCSS.css" rel="stylesheet">
</head>

<body>

<div class="container">

<div class="row">

<div class="col-lg-8 col-lg-offset-2" id="form-body">

<div id="main-form" role="form">

<div class="messages"></div>

<div class="controls">

<div class="row">
 <div class="col-md-6">
 <div class="form-group">
 <label for="form_name">Firstname *</label>
 <input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *">
 </div>
 </div>
 <div class="col-md-6">
 <div class="form-group">
 <label for="form_lastname">Lastname *</label>
 <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *">
 </div>
 </div>
 </div>
 <div class="row">
 <div class="col-md-6">
 <div class="form-group">
 <label for="form_email">Email *</label>
 <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *">
 </div>
 </div>
 <div class="col-md-6">
 <div class="form-group">
 <label for="form_phone">Phone</label>
 <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone">
 </div>
 </div>
 </div>

<div class="row">
 <div class="col-md-4">
 <div class="form-group"> 
 <label for="form_country">Country</label>
 <select class="form-control" id="form_country"> 
 </select>
 </div>
 </div>
 <div class="col-md-4">
 <div class="form-group"> 
 <label for="form_state">State</label>
 <select class="form-control" id="form_state"> 
 </select>
 </div>
 </div>
 <div class="col-md-4">
 <div class="form-group"> 
 <label for="form_city">City</label>
 <select class="form-control" id="form_city"> 
 </select>
 </div>
 </div>
 </div>
 <div class="row">
 <div class="col-md-12">
 <div class="form-group">
 <label for="form_address">Address *</label>
 <textarea id="form_address" name="address" class="form-control" rows="4"></textarea>
 </div>
 </div>
 <div class="col-md-12">
 <input type="button" class="btn btn-success btn-send" value="Submit">
 </div>
 </div>

<div class="row">
 <div class="col-md-12">
 <p class="text-muted"><strong>*</strong> These fields are required.</p>
 </div>
 </div>
 </div>

</div>

</div>
 <!-- /.8 -->

</div>
 <!-- /.row-->

</div>
 <!-- /.container-->

<script src="../CustomCode/referenceFiles/jquery.min.js"></script>
 <script src="../CustomCode/referenceFiles/bootstrap.min.js"></script>
 <script src="../CustomCode/js/CustomJS.js"></script>
 <!--<script src="validator.js"></script>
 <script src="contact.js"></script>-->
</body>

</html>

This will look like

Multi Level Cascading Dropdown
SharePoint Bootstap form

When user selects Country, it will populate only those states which belongs to selected countris, when user select perticular state, it will populate only those cities which belongs to selected state.

here is the REST javascript file for Multi Level Cascading Dropdown:

$(document).ready(function() {
 appendCountries(); 
 $('#form_country').change(function(){
 appendStates(); 
 });
 $('#form_state').change(function(){ 
 appendCity(); 
 });
 $('.btn').click(function(){
 AddListItem();
 }); 
});

function appendCountries(){
 $.ajax({ 
 url: "../_vti_bin/ListData.svc/CountryStateCity()?$orderby= Title asc&$select=Title",
 type: "get",
 headers: {"Accept": "application/json;odata=verbose"},
 success: function (data) {
 var values = [];
 var uniqueValues = [];
 var option = "";
 var valuesArray = data.d.results; 
 $.each(valuesArray ,function(i,result){
 values.push(result.Title); 
 }); 
 $.each(values, function(i, el){
 if($.inArray(el, uniqueValues) === -1) {
 uniqueValues.push(el); 
 option += "<option value='"+el+"'>"+el+"</option>"; 
 }
 });
 $("#form_country").append(option); 
 },
 error: function (data) {
 alert(data.responseJSON.error);
 }
 });
}
function appendStates(){
 var country = $('#form_country').val();
 $.ajax({ 
 url: "../_vti_bin/ListData.svc/CountryStateCity()?$select=State&$filter=Title eq '"+country+"'&$expand=State&$orderby= State/Title asc",
 type: "get",
 headers: {"Accept": "application/json;odata=verbose"},
 success: function (data) {
 var values = [];
 var uniqueValues = [];
 var option = "";
 var valuesArray = data.d.results; 
 $.each(valuesArray ,function(i,result){
 values.push(result.State.Title); 
 }); 
 $.each(values, function(i, el){
 if($.inArray(el, uniqueValues) === -1) {
 uniqueValues.push(el); 
 option += "<option value='"+el+"'>"+el+"</option>"; 
 }
 });
 $("#form_state").empty(); 
 $("#form_state").append(option); 
 },
 error: function (data) {
 alert(data.responseJSON.error);
 }
 });
}
function appendCity(){
 var state = $('#form_state').val();
 $.ajax({ 
 url: "../_vti_bin/ListData.svc/CountryStateCity()?$select=City&$filter=State/Title eq '"+state+"'&$expand=State,City&$orderby= City/Title asc",
 type: "get",
 headers: {"Accept": "application/json;odata=verbose"},
 success: function (data) {
 var values = [];
 var uniqueValues = [];
 var option = "";
 var valuesArray = data.d.results; 
 $.each(valuesArray ,function(i,result){
 values.push(result.City.Title); 
 }); 
 $.each(values, function(i, el){
 if($.inArray(el, uniqueValues) === -1) {
 uniqueValues.push(el); 
 option += "<option value='"+el+"'>"+el+"</option>"; 
 }
 });
 $("#form_city").empty(); 
 $("#form_city").append(option); 
 },
 error: function (data) {
 alert(data.responseJSON.error);
 }
 });
}
function AddListItem() 
{ 
 var firstName = $("#form_name").val(); 
 var lastName = $("#form_lastname").val();
 var email = $("#form_email");
 var phone = $('#form_phone');
 var country = $('#form_country'); 
 var state = $('#form_state');
 var city = $('#form_city');
 var address = $('#form_address');
 $.ajax 
 ({ 
 url: _spPageContextInfo.webAbsoluteUrl + "../_vti_bin/ListData.svc/EmployeeDetails()", 
 type: "POST", 
 data: JSON.stringify 
 ({ 
 __metadata: 
 { 
 type: "SP.Data.TestListItem" 
 }, 
 FirstName: firstName, 
 Lastname: lastName,
 Email : email,
 Phone : phone,
 Country : country,
 State : state,
 City : city,
 Address : address
 }), 
 headers: 
 { 
 "Accept": "application/json;odata=verbose", 
 "Content-Type": "application/json;odata=verbose", 
 "X-RequestDigest": $("#__REQUESTDIGEST").val(), 
 "X-HTTP-Method": "POST" 
 }, 
 success: function(data, status, xhr) 
 { 
 alert('Request has been submitted successfully'); 
 }, 
 error: function(xhr, status, error) 
 { 
 //console.log(data.responseJSON.error);
 alert('Error'); 
 } 
 }); 
}

You can download full code here: Download or use mediafire link or user Google Drive link.

I hope you liked this article. If you have any queries, feel free to ask in comment section below. Like our facebook page and subscribe to our newsletter for future updates. Have a nice day!

Leave a Reply

Your email address will not be published. Required fields are marked *