locked
Populating country, state, and city by using Ajax

    Question

  • Any body can tell me,  how to populating country, state, and city drop down list by using Ajax and c# in 2005 without postback page. I am very new in Ajax and try to learn some basic concepts of ajax. please send me the code with explanation in my email id vishnu108mishra@gmail.com
    Thursday, October 18, 2007 11:33 AM

All replies

  •  

    Try this code.

    The states are encoded in the code, but you can use request those states from a database. You should be able to query with Live Map or Google Map for complete world address mapping. I haven't try that, but it is worth a try.

     

    Code Block

    <html>
    <head>
    <title>Dynamic Select Example</title>

    <script type="text/javascript">
    // Create arrays containing country states
    // Note: These arrays could be created dynamically
    var arrCountries, arrCountriesName, arrUS, arrCA
    arrUS
    = ["AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "DC", "FL",
    "GA", "GU", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA",
    "ME", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV",
    "NH", "NJ", "NM", "NY", "NC", "ND", "OH", "OK", "OR", "PA",
    "PR", "RI", "SC", "SD", "TN", "TX", "UT", "VT", "VI", "VA",
    "WA", "WV", "WI", "WY",
    "-- Armed Forces --", "AA", "AE", "AP"]
    arrCA
    = ["AB", "BC", "MB", "NB", "NL", "NT", "NS", "NU", "ON", "PE", "QC","SK","YT"]
    arrCountries
    =[arrUS, arrCA]
    arrCountriesName
    = ["US", "CA"]


    // Function to handle dynamically altering the contents of the State List box
    function updateStates(theForm, newDisplay)
    { var CountrySelect, StateSelect, NumEntries, i
    CountrySelect
    = theForm.Countries
    StateSelect
    = theForm.States

    // Delete all entries in the cities list box
    for (i = StateSelect.length; i > 0; i--){
    StateSelect
    .options[i-1] = null
    }

    // Add comment option to State List box
    StateSelect
    .options[0] = new Option("-- Select State --",-1)

    // If state is selected add its cities to the City List box
    if (newDisplay >= 0) {
    NumEntries
    = arrCountries[newDisplay].length
    for (i = 0; i < NumEntries; i++) {
    StateSelect
    .options[i+1] = new Option((arrCountries[newDisplay])[i],(arrCountries[newDisplay])[i])
    }
    }
    StateSelect
    .selected = -1
    }

    function showResult(theForm)
    { var CountrySelect, StateSelect
    CountrySelect
    = theForm.Countries
    StateSelect
    = theForm.States
    alert
    (arrCountriesName[CountrySelect.value]);
    alert
    (StateSelect.value);
    }
    </script>
    </head>

    <body>
    <form name=
    "frm" action="">
    Country:
    <select name=
    "Countries" onChange="updateStates(document.frm, this[this.selectedIndex].value)">
    <option value=
    "-1">-- Select Country --
    <option value=
    "0">US</option>
    <option value=
    "1">CA</option>
    </select>
    <p>

    State:
    <select name=
    "States" onChange="showResult(document.frm)">
    <option value=
    "-1">-- Select State --</option>
    </select>
    <script type="text/javascript">
    updateStates
    (document.frm, -1)
    </script>
    </form>
    </body>
    </html>

     

     

    Monday, October 22, 2007 9:59 PM