Now using ClassName but the code repetition does not workImplement Cascading DropDownList using JavaScriptThe first one works but the second one does notlthtmlgtltheadgt ltlink rel34stylesheet34 href34httpsmaxcdnbootstrapcdncombootstrap341cssbootstrapmincss34 gt ltscript src34httpsajaxgoogleapiscomajaxlibsjquery341jqueryminjs34gtltscriptgt ltscript src34httpsmaxcdnbootstrapcdncombootstrap341jsboot

Hi letstryRefer below codeHTMLlthtml xmlns34httpwwww3org1999xhtml34gtltheadgt lttitlegtlttitlegtltheadgtltbodygt ltlink rel34stylesheet34 href34httpsmaxcdnbootstrapcdncombootstrap341cssbootstrapmincss34 gt ltscript src34httpsajaxgoogleapiscomajaxlibsjquery341jqueryminjs34gtltscriptgt ltscript src34httpsmaxcdnbootstrapcdncombootstrap341jsbootstrapminjs34gtltscriptgt ltscript type34textjavascript34gt var object 34India34 34Mumbai34 34Bandra34 34Goregaon34 34Marin Lines34 34Pune34 34Lal Mahal34 34Hinjawadi34 34Delhi34 34Gurugram34 34Karol Bagh34 34United States34 34California34 34San Diego34 34Sears Point34

Implement Cascading DropDownList using ClassName in JavaScript

letstry

SOLVED CLOSED ACTIVE ANSWERED
User: letstry
Posted: on Dec 11, 2022 09:41 PM
Forum: JavaScript
Answer: 1
Views: 1427

Now using ClassName, but the code repetition does not work.

The first one works, but the second one does not.

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <form name="myform"  id="myForm">
 <div class="form-row">
 <div class="form-group col-md-1">
        <select name="optone" class="selectDD form-control stateSel" size="1">
            <option value="" selected="selected">Select state</option>
        </select> 
</div>
<div class="form-group col-md-1">
        <select name="opttwo" class="selectDD form-control countySel" size="1">
            <option value="" selected="selected">Please select state first</option>
        </select>
      </div>
<div class="form-group col-md-1">
        <select name="optthree" class="selectDD form-control citySel" size="1">
            <option value="" selected="selected">Please select county first</option>
        </select>
</div>
<br><br><br><br>
<div class="form-group col-md-2">
        <select name="optone" class="selectDD form-control stateSel" size="1">
            <option value="" selected="selected">Select state</option>
        </select> </div>

      <div class="form-group col-md-1">
        <select name="opttwo" class="selectDD form-control countySel" size="1">
            <option value="" selected="selected">Please select state first</option>
        </select>
      </div>
    <div class="form-group col-md-1">
        <select name="optthree" class="selectDD form-control citySel" size="1">
            <option value="" selected="selected">Please select county first</option>
        </select>
    </div>
</div>
</form>
    <script>
        var stateObject = {
            "India": {
                "Mumbai": ["Bandra", "Goregaon", "Marin Lines"],
                "Pune": ["Lal Mahal", "Hinjawadi"],
                "Delhi": ["Gurugram", "Karol Bagh"]
            },
            "United States": {
                "California": ["San Diego", "Sears Point"],
                "Nevada": ["Las Vegas", "Lamoille Canyon"]
            },
            "United Kingdom": {
                "England": ["Cambridge.", "London", "Bristol"],
                "Scotland": ["Glasgow", "Edinburgh"]
            }
        }
        window.onload = function () {
            var stateSel = document.getElementsByClassName("stateSel")[0],
                countySel = document.getElementsByClassName("countySel")[0],
                citySel = document.getElementsByClassName("citySel")[0];
 
            for (var state in stateObject) {
                stateSel.options[stateSel.options.length] = new Option(state, state);
            }
 
            stateSel.onchange = function () {
                countySel.length = 1;
                citySel.length = 1;
                if (this.selectedIndes < 1) return;
                for (var county in stateObject[this.value]) {
                    countySel.options[countySel.options.length] = new Option(county, county);
                }
            }
 
            stateSel.onchange(); 
            countySel.onchange = function () {
                citySel.length = 1;
                if (this.selectedIndex < 1) return;
 
                var cities = stateObject[stateSel.value][this.value];
                for (var i = 0; i < cities.length; i++) {
                    citySel.options[citySel.options.length] = new Option(cities[i], cities[i]);
                }
            }
        }
    </script>
</body>
</html>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Dec 12, 2022 02:46 AM
Modified: on Dec 19, 2022 10:42 AM
Report

Hi letstry,

Refer below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        var object = {
            "India": {
                "Mumbai": ["Bandra", "Goregaon", "Marin Lines"],
                "Pune": ["Lal Mahal", "Hinjawadi"],
                "Delhi": ["Gurugram", "Karol Bagh"]
            },
            "United States": {
                "California": ["San Diego", "Sears Point"],
                "Nevada": ["Las Vegas", "Lamoille Canyon"]
            },
            "United Kingdom": {
                "England": ["Cambridge.", "London", "Bristol"],
                "Scotland": ["Glasgow", "Edinburgh"]
            }
        }

        window.onload = function () {
            var countries = document.getElementsByClassName("countrySel");
            for (var i = 0; i < countries.length; i++) {
                var ddlCountry = countries[i];
                for (var country in object) {
                    ddlCountry.options[ddlCountry.options.length] = new Option(country, country);
                }
            }
        };

        function CountryChange(ele) {
            var ddlState = $(ele).parent().next().find('.stateSel')[0];
            ddlState.length = 1;
            var ddlCity = $(ele).parent().next().next().find('.citySel')[0];
            ddlCity.length = 1;
            if (ele.selectedIndex < 1) return;
            for (var state in object[ele.value]) {
                ddlState.options[ddlState.options.length] = new Option(state, state);
            }
        }

        function StateChange(ele) {
            var ddlCity = $(ele).parent().next().find('.citySel')[0];
            ddlCity.length = 1;
            if (ele.selectedIndex < 1) return;
            for (var country in object) {
                if (object[country][ele.value] != undefined) {
                    for (var i = 0; i < object[country][ele.value].length; i++) {
                        var city = object[country][ele.value][i];
                        ddlCity.options[ddlCity.options.length] = new Option(city, city);
                    }
                }
            }
        }
    </script>
    <div class="form-row">
        <div class="form-group col-md-1">
            <select name="optone" class="selectDD form-control countrySel" size="1" onchange="CountryChange(this)">
                <option value="" selected="selected">Please select county</option>
            </select>
        </div>
        <div class="form-group col-md-1">
            <select name="opttwo" class="selectDD form-control stateSel" size="1" onchange="StateChange(this)">
                <option value="" selected="selected">Please select state</option>
            </select>
        </div>
        <div class="form-group col-md-1">
            <select name="optthree" class="selectDD form-control citySel" size="1">
                <option value="" selected="selected">Please select city</option>
            </select>
        </div>
        <hr />
        <div class="form-group col-md-1">
            <select name="optone" class="selectDD form-control countrySel" size="1" onchange="CountryChange(this)">
                <option value="" selected="selected">Please select country</option>
            </select>
        </div>
        <div class="form-group col-md-1">
            <select name="opttwo" class="selectDD form-control stateSel" size="1" onchange="StateChange(this)">
                <option value="" selected="selected">Please select state</option>
            </select>
        </div>
        <div class="form-group col-md-1">
            <select name="optthree" class="selectDD form-control citySel" size="1">
                <option value="" selected="selected">Please select city</option>
            </select>
        </div>
    </div>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Implement Cascading DropDownList using ClassName in JavaScript

Implement Cascading DropDownList using JavaScript

Company

Explore

Follow us

Contact Us