Computing.Net > Forums > Web Development > How to do this?

Computer Problems? Computing.Net has over 1,000,000 posts about all things technology related! Over 90% answered within 24 hours! Click here to start participating now! Also, be sure to check out the New User Guide.

How to do this?

Reply to Message Icon

Name: vivekasolutions
Date: February 21, 2007 at 21:44:15 Pacific
OS: window xp
CPU/Ram: 256
Product: pentium III
Comment:

hi,
in my code country-state-city are in list boxes,where after selecting state name,city list must be generated dynamically and only those cities of respected state should come in city list box. How to do it in javascript?, If anybody should help me,please...

Viveka



Sponsored Link
Ads by Google

Response Number 1
Name: Michael J (by mjdamato)
Date: February 22, 2007 at 12:19:27 Pacific
Reply:

Here's an example I have:

<html>
<head>

<script type="text/javascript">


// State lists
var states = new Array();

//Canada States
states[0] = new Array('Alberta','British Columbia','Ontario');
//Mexico States
states[1] = new Array('Baja California','Chihuahua','Jalisco');
//US States
states[2] = new Array('California','Florida','New York');


// City lists
var cities = new Array();
cities[0] = new Array();
cities[0][0] = new Array('Edmonton','Calgary');
cities[0][1] = new Array('Victoria','Vancouver');
cities[0][2] = new Array('Toronto','Hamilton');

cities[1] = new Array();
cities[1][0] = new Array('Tijauna','Mexicali');
cities[1][1] = new Array('Ciudad Juárez','Chihuahua');
cities[1][2] = new Array('Guadalajara','Chapala');

cities[2] = new Array();
cities[2][0] = new Array('Los Angeles','San Francisco');
cities[2][1] = new Array('Miami','Orlando');
cities[2][2] = new Array('Buffalo','new York');


function setStates(){

cntrySel = document.getElementById('country');
stateSel = document.getElementById('state');
stateList = states[cntrySel.selectedIndex];

changeSelect(stateSel, stateList);
setCities();

}

function setCities(){

cntrySel = document.getElementById('country');
stateSel = document.getElementById('state');
citySel = document.getElementById('city');
cityList = cities[cntrySel.selectedIndex][stateSel.selectedIndex];

changeSelect(citySel, cityList);

}

function changeSelect(field, arrayVals) {
field.options.length = 0;
for (i=0; i<arrayVals.length; i++) {
field.options[field.length] = new Option(arrayVals[i],arrayVals[i]);
}
}

</script>

</head>

<body onload="setStates();">
<form name="test" method="POST" action="processingpage.php">

Country:
<select name="country" id="country" onchange="setStates();">
<option value="Canada">Canada</option>
<option value="Mexico">Mexico</option>
<option value="United States">United States</option>
</select>

State:
<select name="state" id="state" onchange="setCities();">
<option value="">Please select a Country</option>
</select>

City:
<select name="city" id="city">
<option value="">Please select a Country</option>
</select>
</form>
</body>
</html>

Michael J


0

Response Number 2
Name: edwardwalter
Date: March 11, 2007 at 22:53:01 Pacific
Reply:

Well Ofcourse I don't have a solution to your query but still may be you shall like my suggestion that its good if you should visit the site of very popular Web Designing Company- www.webdesigningcompany.net
You will found the lot more easiest ways to design the specific set of websites.
Also various articles regarding web designing will certainly help you better.


wwwwwww


0

Response Number 3
Name: Michael J (by mjdamato)
Date: March 12, 2007 at 08:31:12 Pacific
Reply:

^^ SPAM ^^

Michael J


0

Response Number 4
Name: vivekasolutions
Date: March 18, 2007 at 22:25:20 Pacific
Reply:

hi michael,myself sheetal, the code u send me working perfectly,thank u...

Viveka


0

Sponsored Link
Ads by Google
Reply to Message Icon

Related Posts

See More







Post Locked

This post is quite old and has been locked from receiving new replies. Please create a new posting instead.


Go to Web Development Forum Home


Sponsored links

Ads by Google


Results for: How to do this?

How to do a LAN search www.computing.net/answers/webdevel/how-to-do-a-lan-search/1237.html

how to have this effect? www.computing.net/answers/webdevel/how-to-have-this-effect/3238.html

how to write this php script www.computing.net/answers/webdevel/how-to-write-this-php-script/2690.html