Cascading in EJ2 JavaScript Combo box control

2 May 20237 minutes to read

The cascading ComboBox is a series of ComboBox, where the value of one ComboBox depends upon another’s value. This can be configured by using the change event of the parent ComboBox. Within that change event handler, data has to be loaded to the child ComboBox based on the selected value of the parent ComboBox.

The following example, shows the cascade behavior of country, state, and city ComboBox. Here, the dataBind method is used to reflect the property changes immediately to the ComboBox.

index.js
index.html
//define the country ComboBox data
var countryData = [
    { CountryName: 'Australia', CountryId: '2' },
    { CountryName: 'United States', CountryId: '1' }
];
//define the state ComboBox data
var stateData = [
    { StateName: 'New York', CountryId: '1', StateId: '101' },
    { StateName: 'Virginia ', CountryId: '1', StateId: '102' },
    { StateName: 'Tasmania ', CountryId: '2', StateId: '105' }
];
//define the city ComboBox data
var cityData = [
    { CityName: 'Albany', StateId: '101', CityId: 201 },
    { CityName: 'Beacon ', StateId: '101', CityId: 202 },
    { CityName: 'Emporia', StateId: '102', CityId: 206 },
    { CityName: 'Hampton ', StateId: '102', CityId: 205 },
    { CityName: 'Hobart', StateId: '105', CityId: 213 },
    { CityName: 'Launceston ', StateId: '105', CityId: 214 }
];
//initiates the country ComboBox
var countryObj = new ej.dropdowns.ComboBox({
    //set the data to dataSource property
    dataSource: countryData,
    fields: { value: 'CountryId', text: 'CountryName' },
    //bind the change event handler
    change: () => {
        //Query the data source based on country ComboBox selected value
        stateObj.query = new ej.data.Query().where('CountryId', 'equal', countryObj.value);
        // enable the state ComboBox
        stateObj.enabled = true;
        //clear the existing selection.
        stateObj.text = null;
        // bind the property changes to state ComboBox
        stateObj.dataBind();
        //clear the existing selection in city ComboBox
        cityObj.text = null;
        //disabe the city ComboBox
        cityObj.enabled = false;
        //bind the property cahnges to City ComboBox
        cityObj.dataBind();
    },
    placeholder: 'Select a country',
});
//render the country ComboBox
countryObj.appendTo('#countries');
//initiates the state ComboBox
var stateObj = new ej.dropdowns.ComboBox({
    //set the data to dataSource property
    dataSource: stateData,
    fields: { value: 'StateId', text: 'StateName' },
    // set disable state by default to prevent user interact.
    enabled: false,
    change: () => {
        // Query the data source based on state ComboBox selected value
        cityObj.query = new ej.data.Query().where('StateId', 'equal', stateObj.value);
        // enable the city ComboBox
        cityObj.enabled = true;
        //clear the existing selection
        cityObj.text = null;
        // bind the property change to city ComboBox
        cityObj.dataBind();
    },
    placeholder: 'Select a state',
});
//render the state ComboBox
stateObj.appendTo('#states');
//initiates the city ComboBox
var cityObj = new ej.dropdowns.ComboBox({
    //set the data to dataSource property
    dataSource: cityData,
    fields: { text: 'CityName', value: 'CityId' },
    // disable the ComboBox by default to prevent the user interact.
    enabled: false,
    placeholder: 'Select a city',
});
//render the city ComboBox
cityObj.appendTo('#cities');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 ComboBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin:50px auto 0; width:250px;">
        <br>
          <input type="text" id="countries">
        <div class="padding-top">
          <input type="text" id="states">
        </div>
        <div class="padding-top">
          <input type="text" id="cities">
        </div>   
    </div>   


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>