How populate country, state, city selection in my ASP.NET dropdown control using javascript code>

Question

0.00/5 (No votes)

See more:

Please give the solution of my query, i'm trying to fetch data in asp.net dropdown control but not done yet, i want to make registration form but in that form need to have client side code like, auto populate data in my drop down for country, state, City..---------------------------------------------------------------------------------------------------------.

What I have tried:

var countryStateInfo = {
    "USA": {
        "California": {
            "Los Angeles": ["90001", "90002", "90003", "90004"],
            "San Diego": ["92093", "92101"]
        },
        "Texas": {
            "Dallas": ["75201", "75202"],
            "Austin": ["73301", "73344"]
        }
    },
    "India": {
        "Assam": {
            "Dispur": ["781005"],
            "Guwahati": ["781030", "781030"]
        },
        "Gujarat": {
            "Vadodara": ["390011", "390020"],
            "Surat": ["395006", "395002"]
        }
    }
}

window.onload = function () {

    //Get html elements
    var DDLCountry = document.getElementById("DDLCountry"); 
    var DDLState = document.getElementById("DDLState");
    var DDLDist = document.getElementById("DDLDist");
    var DDLCity = document.getElementById("DDLCity");

    ///DDLCountry, DDLState , DDLDist, DDLCity

    //Load countries
    for (var country in countryStateInfo) {
        DDLCountry.options[DDLCountry.options.length] = new Option(country, country);
    }

    //County Changed
    DDLCountry.onchange = function () {

        DDLState.length = 1; // remove all options bar first
        DDLDist.length = 1; // remove all options bar first
        DDLCity.length = 1; // remove all options bar first

        if (this.selectedIndex < 1)
            return; // done

        for (var state in countryStateInfo[this.value]) {
            DDLState.options[DDLState.options.length] = new Option(state, state);
        }
    }

    //State Changed
    DDLState.onchange = function () {

        DDLDist.length = 1; // remove all options bar first
        DDLCity.length = 1; // remove all options bar first

        if (this.selectedIndex < 1)
            return; // done

        for (var city in countryStateInfo[DDLCountry.value][this.value]) {
            DDLDist.options[DDLDist.options.length] = new Option(city, city);
        }
    }

    //City Changed
    DDLDist.onchange = function () {
        DDLCity.length = 1; // remove all options bar first

        if (this.selectedIndex < 1)
            return; // done

        var zips = countryStateInfo[DDLCountry.value][DDLState.value][this.value];
        for (var i = 0; i < zips.length; i++) {
            DDLCity.options[DDLCity.options.length] = new Option(zips[i], zips[i]);
        }
    }
}

Asp.net code:

<div class="col-md-4 uppad"><label>Country *</label>
                           <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="DDLCountry"  ErrorMessage="Select Country" ForeColor="Red" InitialValue="--Select Customer Type--" ValidationGroup="hashmi"></asp:RequiredFieldValidator>
                           <asp:DropDownList ID="DDLCountry" runat="server"  class="form-control" size="1" ><%--OnSelectedIndexChanged="DDLState_SelectedIndexChanged">--%>
                                <%--<asp:ListItem>-- Select Country --</asp:ListItem>--%>
                           </asp:DropDownList></div>

                            <div class="col-md-4 uppad"><label>State *</label>
                           <asp:RequiredFieldValidator ID="RequiredFieldValidator24" runat="server" ControlToValidate="DDLState" ErrorMessage="Select State" ForeColor="Red" InitialValue="--Select State--" ValidationGroup="hashmi"></asp:RequiredFieldValidator>
                           <asp:DropDownList ID="DDLState" runat="server"  class="form-control" OnSelectedIndexChanged="DDLState_SelectedIndexChanged">
                               <%--<asp:ListItem>--Select State--</asp:ListItem>--%>
                           </asp:DropDownList></div>

                           <div class="col-md-4 uppad"><label>District *</label>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator25" runat="server" ControlToValidate="DDLDist" ErrorMessage="Select District" ForeColor="Red" InitialValue="--Select District--" ValidationGroup="hashmi"></asp:RequiredFieldValidator>
                            <asp:DropDownList ID="DDLDist" runat="server"  class="form-control">
                                 <%--<asp:ListItem>--Select District--</asp:ListItem>--%>
                            </asp:DropDownList> </div>

                          <div class="col-md-4 uppad"><label>City *</label>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator26" runat="server" ControlToValidate="DDLCity" ErrorMessage="Select City" ForeColor="Red" InitialValue="--Select City--" ValidationGroup="hashmi"></asp:RequiredFieldValidator>
                            <asp:DropDownList ID="DDLCity" runat="server"  class="form-control">
                                <%--<asp:ListItem>--Select City--</asp:ListItem>--%>
                            </asp:DropDownList> </div>
                        </div>

Posted 11-Apr-19 4:13am

Member 11714515

Updated 11-Apr-19 5:54am

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Vincent Maverick Durano · Answer 1 · 2019-04-11T05:54:00

Perhaps you need to understand first the concepts and fundamentals of server controls and client-side functions in the context of ASP.NET. In essence, you should avoid when possible mixing your server-side implementation with client-side. DropDownList control is a server control and they are meant to be manipulated at the server-side, mixing it with JavaScript is "doable" however it will give you trouble when functionality gets complicated.

If you wanted to implement cascading DropDownList at the client, then you could easily do that with jQuery. Here's an example: Cascading DropDownLists with jQuery and ASP.NET[^]

However, if you really need JavaScript then there's no need for you to use the asp.net DropDownList control. Here's a quick example:

HTML:

HTML

<select name="optone" id="countrySel" size="1">
    <option value="" selected="selected">Select Country</option>
</select>
<br>
<br>
<select name="opttwo" id="stateSel" size="1">
    <option value="" selected="selected">Select State</option>
</select>
<br>
<br>
<select name="optthree" id="citySel" size="1">
    <option value="" selected="selected">Select City</option>
</select>

JAVASCRIPT:

JavaScript

var countryStateInfo = {
    "USA": {
        "California": {
            "Los Angeles": ["90001", "90002", "90003", "90004"],
            "San Diego": ["92093", "92101"]
        },
        "Texas": {
            "Dallas": ["75201", "75202"],
            "Austin": ["73301", "73344"]
        }
    },
    "India": {
        "Assam": {
            "Dispur": ["781005"],
            "Guwahati": ["781030", "781030"]
        },
        "Gujarat": {
            "Vadodara": ["390011", "390020"],
            "Surat": ["395006", "395002"]
        }
    }
}
window.onload = function () {
    var countrySel = document.getElementById("countrySel"),
        stateSel = document.getElementById("stateSel"),
        citySel = document.getElementById("citySel");
        
    for (var country in countryStateInfo) {
        countrySel.options[countrySel.options.length] = new Option(country, country);
    }
    
    countrySel.onchange = function () {
        stateSel.length = 1; // remove all options bar first
        citySel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) {
          stateSel.options[0].text = "Select State"
          citySel.options[0].text = "Select City"
          return; // done   
        }  
        stateSel.options[0].text = "Select State"
        for (var state in countryStateInfo[this.value]) {
            stateSel.options[stateSel.options.length] = new Option(state, state);
        }
        if (stateSel.options.length==2) {
          stateSel.selectedIndex=1;
          stateSel.onchange();
        }  
        
    }
    
    countrySel.onchange(); // reset in case page is reloaded
    stateSel.onchange = function () {
        citySel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) {
          citySel.options[0].text = "Please select State first"
          return; // done   
        }  
        citySel.options[0].text = "Please select City"

        for (var city in countryStateInfo[countrySel.value][this.value]) {
         
            citySel.options[citySel.options.length] = new Option(city, city);
        }
        if (citySel.options.length==2) {
          citySel.selectedIndex=1;
          citySel.onchange();
        }  
        
    }
}

If you want to use the ASP.NET DropDownList control then replace this:

JavaScript

var countrySel = document.getElementById("countrySel"),
    stateSel = document.getElementById("stateSel"),
    citySel = document.getElementById("citySel");

with this:

JavaScript

var countrySel = document.getElementById("<%= DDLCountry.ClientID %>"),
    stateSel = document.getElementById("<%= DDLState.ClientID %>"),
    citySel = document.getElementById("<%= DDLCity.ClientID %>");

and make sure to turn-off AutoPostbackfor all your DropDownlist.

You can also implement it using server-side with DropDownList. That really depends on you.

How populate country, state, city selection in my ASP.NET dropdown control using javascript code>

1 solution

Solution 1

Add your solution here

Preview 0

How populate country, state, city selection in my ASP.NET dropdown control using javascript code>

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us