Country state dropdown using javascript and jsp

msurya · 10-09-2012, 08:37 AM

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.

shyagrawal · 10-09-2012, 08:39 AM

Hi,

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

Philip M · 10-09-2012, 08:49 AM

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

msurya · 10-09-2012, 01:56 PM

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.

msurya · 10-09-2012, 01:57 PM

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();">
<form

ption value="-1" label="--- Select ---"/></form:select></td>

State:
<td><form:select path="stateId" id="sId"><form

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

Philip M · 10-09-2012, 03:30 PM

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.

msurya · 10-10-2012, 06:11 AM

Sorry, I dint know that it should be in # as am new to CF. And please check the edited code.