Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Country state dropdown using javascript and jsp

    Hi,
    I am a fresher, started my career in java, learning javascript. I have coded a registration form where I have a dropdown of all the countries from the database, and based on that the states corresponding to that country have to get populated.I googled many forums and finally have done it using ajax. I also wanted to do it in javascript .Can someone help me out.

  • #2
    New Coder
    Join Date
    Sep 2012
    Posts
    22
    Thanks
    0
    Thanked 6 Times in 6 Posts
    Hi,

    You can call onchange function on Country Select tag. Than in that function, you can set another select tag value.

  • Users who have thanked shyagrawal for this post:

    msurya (10-09-2012)

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,029
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    Is this what you are wanting?

    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    
    var countries = [ ];
    countries["Egypt"]   = ["Cairo","Alexandria","Sharm","Luxor"];
    countries["Germany"] = ["Munchen","Dortmund","Berlin","Koln", "Nurnberg"];
    countries["France"] = ["Paris", "Rouen", "Lille", "Lyon", "Marseilles"];
    countries["USA"]     = ["New York","Chicago","Dallas","Seattle","Los Angeles", "Atlanta", "Boston", "Miami"];
    countries["Japan"]   = ["Tokyo","Osaka","Kyoto","Sapporo"];
    
    function switchCountry(selCountry) {
    var citySel = selCountry.form.City;
    for ( var s = citySel.options.length-1; s > 0; --s )  {
    citySel.options[s] = null;
    }
    
    var chosen = selCountry.options[selCountry.selectedIndex].text;
    var cList = countries[chosen];
    if ( cList != null )   {
    for ( var i = 0; i < cList.length; ++i )   {
    citySel.options[i+1] = new Option(cList[i],cList[i]);
    }
    }
    
    }
    
    function showSelection() {
    var country = document.forms[0].Country.value;
    var city = document.forms[0].City.value;
    if (city != "") {
    alert ("You selected " + city + " in " + country);
    }
    }
    
    </script>
    
    </head>
    <body>
    <form>
    <select name="Country" onchange="switchCountry(this);">
    <option value = "">Choose Country</option>
    <option value = "Egypt">Egypt</option>
    <option value = "Germany">Germany</option>
    <option value = "France">France</option>
    <option value = "Japan">Japan</option>
    <option value = "USA">USA</option>
    </select>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <select name="City" onchange = "showSelection()">
    <option>Choose City</option>
    </select>
    </form>
    </body>
    </html>

    Quizmaster: Which Russian leader is credited as the architect of glasnost?
    Contestant: Stalin

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    msurya (10-09-2012)

  • #4
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the reply.I have tried the same, giving the <script> in .js file. I want to get the list of countries given in the <option> tag through MVC.
    Last edited by msurya; 10-11-2012 at 10:41 AM. Reason: I dint know that it should be in # as am new to CF.

  • #5
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the reply.I have tried the same, giving the <script> in .js file. I want to get the list of countries given in the <option> tag through MVC.

    Country:
    <td><form:select path="countryId" id="cld" name="cld" items="${countryList}" onchange="statesSelected();">
    <formption value="-1" label="--- Select ---"/></form:select></td>

    State:
    <td><form:select path="stateId" id="sId"><formption value="-1" label="--- Select ---"/> </form:select></td>
    <td id="stateError" style="margin-left:120px;color:red;"></td>[/QUOTE]

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,029
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    When posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. It should be obvious why this is necessary This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sorry, I dint know that it should be in # as am new to CF. And please check the edited code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •