Preselect the list items in multiple cascading DropDownList

12 Apr 20225 minutes to read

CSHTML

<div class="padding-top">
    <ejs-dropdownlist id="country" placeholder="Select a country" popupHeight="@ViewBag.popupHeight" dataSource="@ViewBag.country" change="countrychange">
        <e-dropdownlist-fields text="CountryName" value="CountryId"></e-dropdownlist-fields>
    </ejs-dropdownlist>

</div>
<div class="padding-top">
    <ejs-dropdownlist id="state" enabled="false" placeholder="Select a state" popupHeight="@ViewBag.popupHeight" dataSource="@ViewBag.state" change="statechange">
        <e-dropdownlist-fields text="StateName" value="StateId"></e-dropdownlist-fields>
    </ejs-dropdownlist>
</div>
<div class="padding-top">
    <ejs-dropdownlist id="city" placeholder="Select a city" enabled="false" popupHeight="@ViewBag.popupHeight" dataSource="@ViewBag.cities">
        <e-dropdownlist-fields text="CityName" value="CityId"></e-dropdownlist-fields>
    </ejs-dropdownlist>
</div>
<script type="text/javascript">
    function countrychange() {
        // disable the state DropDownList
        var countryObj = document.getElementById('country').ej2_instances[0];
        var state = document.getElementById('state').ej2_instances[0];
        var city = document.getElementById('city').ej2_instances[0];
        state.enabled = true;
        //frame the query based on selected value in country DropDownList.
        var tempQuery = new ej.data.Query().where('CountryId', 'equal', countryObj.value);
        // set the framed query based on selected value in country DropDownList.
        state.query = tempQuery;
        // preselect an item from filtered state DropDownList
        state.index = 0;
        //  bind the property changes to state DropDownList
        state.dataBind();
        // preselect an item from filtered city DropDownList
        city.index = 0;
        // disable the city DropDownList
        city.enabled = false;
        // bind the property changes to City DropDownList
        city.dataBind();
    }
    function statechange() {
        var stateObj = document.getElementById('state').ej2_instances[0];
        var city = document.getElementById('city').ej2_instances[0];
        city.enabled = true;
        //Query the data source based on state DropDownList selected value
        var tempQuery = new ej.data.Query().where('StateId', 'equal', stateObj.value);
        //set the framed query based on selected value in city DropDownList.
        city.query = tempQuery;
        //clear the existing selection
        city.text = null;
        //bind the property change to city DropDownList
        city.dataBind();

    }
</script>

Country.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Models
{
    public class Country
    {
        public string CountryName { get; set; }
        public string CountryId { get; set; }

        public List<Country> CountryList()
        {
            List<Country> country = new List<Country>();
            country.Add(new Country() { CountryName = "Australia", CountryId = "2" });
            country.Add(new Country() { CountryName = "United States", CountryId = "1" });
            return country;
        }
    }
}