city state selection onSelect Help
I have an input box that has a list of States. What I want to do is pop up another box next to it after the user selects a state that will populate with that States cities. I do not want the page to have to reload to populate the city select box.
Code:
<select name='state'>
<option value='Alabama'>Alabama</option>
<option value='Alaska'>Alaska</option>
<option value='American Samoa'>American Samoa</option>
<option value='Arizona'>Arizona</option>
<option value='Arkansas'>Arkansas</option>
<option value='California'>California</option>
<option value='Colorado'>Colorado</option>
<option value='Connecticut'>Connecticut</option>
<option value='Delaware'>Delaware</option>
<option value='District Of Columbia'>District Of Columbia</option>
<option value='Federated States of Micronesia'>Federated States of Micronesia</option>
<option value='Florida'>Florida</option>
<option value='Georgia'>Georgia</option>
<option value='Guam'>Guam</option>
<option value='Hawaii'>Hawaii</option>
<option value='Idaho'>Idaho</option>
<option value='Illinois'>Illinois</option>
<option value='Indiana'>Indiana</option>
<option value='Iowa'>Iowa</option>
<option value='Kansas'>Kansas</option>
<option value='Lousisana'>Lousisana</option>
<option value='Maine'>Maine</option>
<option value='Marshall Islands'>Marshall Islands</option>
<option value='Marland'>Marland</option>
<option value='Massachusetts'>Massachusetts</option>
<option value='Michigan'>Michigan</option>
<option value='Minnesota'>Minnesota</option>
<option value='Mississippi'>Mississippi</option>
<option value='Missouri'>Missouri</option>
<option value='Montana'>Montana</option>
<option value='Nevada'>Nevada</option>
<option value='New Hampshire'>New Hampshire</option>
<option value='New Jersey'>New Jersey</option>
<option value='New Mexico'>New Mexico</option>
<option value='New York'>New York</option>
<option value='North Carolina'>North Carolina</option>
<option value='North Dakota'>North Dakota</option>
<option value='Norther Mariana Islands'>Norther Mariana Islands</option>
<option value='Ohio'>Ohio</option>
<option value='Oklahoma'>Oklahoma</option>
<option value='Oregon'>Oregon</option>
<option value='Palau'>Palau</option>
<option value='Pennsylvania'>Pennsylvania</option>
<option value='Puerto Rico'>Puerto Rico</option>
<option value='Rhode Island'>Rhode Island</option>
<option value='South Carolina'>South Carolina</option>
<option value='South Dakota'>South Dakota</option>
<option value='Tennessee'>Tennessee</option>
<option value='Texas'>Texas</option>
<option value='Utah'>Utah</option>
<option value='Vermont'>Vermont</option>
<option value='Virgin Islands'>Virgin Islands</option>
<option value='Virginia'>Virginia</option>
<option value='Washington'>Washington</option>
<option value='West Virginia'>West Virginia</option>
<option value='Wisconsin'>Wisconsin</option>
<option value='Wyoming'>Wyoming</option>
</select> I want the city select box to go here.
Use this part in your HTML section
Code:
<html>
<head>
<title>Country-State Selections</title>
<script type="text/javascript" src="CountryStates.js"></script>
<script type="text/javascript">
function setup(ArrStr) {
s = document.getElementById('country');
var sl = s.options.length;
for (var i = sl-1; i >= 0 ; i--) { s.options[i] = null; }
var tmp = ArrStr.split('|');
for (i = 0; i < tmp.length; i++ ) {
s.options[i] = new Option(tmp[i],tmp[i],false,false);
}
}
function choice(ndx){
s = document.getElementById('states');
var sl = s.options.length;
for (var i = sl-1; i >= 0 ; i--) { s.options[i] = null; }
var tmp = aStates[ndx].split('|');
for (i = 0; i < tmp.length; i++ ) {
s.options[i] = new Option(tmp[i],tmp[i],false,false);
}
}
</script>
</head>
<body>
<select id='country' onchange='choice(this.selectedIndex)'>
<script type="text/javascript">setup(sCountryString)</script>
</select>
<select id='states'></select>
</body>
</html>
Then change the contents of the following external JS file.
Simpler alternate solution:
Code:
<html>
<head>
<title> The State Capital Display </title>
<style type="text/css">
.style1 {
margin-top: 19px;
}
</style>
<script type="text/javascript">
// For:
STATES = ["Alabama|Montgomery|Birmingham|Mobile",
"Alaska|Juneau",
"Arizona|Phoenix",
"Arkansas|Little Rock",
"California|Sacramento|Los Angeles|Lompoc|San Diego|San Bernardino|San Francisco",
"Colorado|Denver",
"Connecticut|Hartford",
"Delaware|Dover",
"Florida|Tallahassee|Miami|Ft. Lauderdale|Orlando|Pensacola|Tampa",
"Georgia|Atlanta|Savannah|Rome",
"Hawaii|Honolulu",
"Idaho|Boise",
"Illinois|Springfield",
"Indiana|Indianapolis",
"Iowa|Des Moines",
"Kansas|Topeka",
"Kentucky|Franfort|Louisville|Boling Green",
"Louisiana|Baton Rouge",
"Maine|Agusta",
"Maryland|Annapolis",
"Massachusetts|Boston",
"Michigan|Lansing",
"Minnesota|Saint Paul",
"Mississippi|Jackson",
"MissouriJefferson City",
"Montana|Helena",
"Nebraska|Lincoln",
"Nevada|Carson City",
"New Hampshire|Concord",
"New Jersey|Trenton",
"New Mexico|Sanda Fe",
"New York|Albany",
"North Carolina|Raleigh",
"North DakotaBismark",
"Ohio|Columbus",
"Oklahoma|Oklahoma City",
"Oregon|Salem",
"Pennsylvania|Harrisburg",
"Rhode Island|Providence",
"South Carolina|Columbia",
"South Dakota|Pierre",
"Tennessee|Nashville",
"Texas|Austin|Dallas|Houston|San Antonio|El Paso|Beaumont|Orange",
"Utah|Salt Lake City",
"Vermont|Montpelier",
"Virginia|Richmond",
"Washington|Olympia",
"West Virginia|Charleston",
"Wisconsin|Madison",
"Wyoming|Cheyenne" // No comma on final entry
];
function SBoxSetup(IDS,ArrInfo,SFlag) {
s = document.getElementById(IDS);
var scnt = s.options.length;
for (var i = scnt-1; i >= 0 ; i--) { s.options[i] = null; }
var tmp = [];
s.options[s.options.length] = new Option('Select:','',false,false);
for (var i=0; i<ArrInfo.length; i++ ) {
tmp = ArrInfo[i].split('|'); // if (tmp[1] == '') { tmp[1] = tmp[0]; }
if (SFlag == '') {
s.options[s.options.length] = new Option(tmp[0],tmp[0],false,false);
} else {
if (tmp[0] == SFlag) {
for (var j=1; j<tmp.length; j++) {
s.options[s.options.length] = new Option(tmp[j],tmp[j],false,false);
}
}
}
// following not used at this time
// s.options[s.options.length] = new Option(ArrInfo[i],ArrInfo[i],false,false); // Other needs
}
}
</script>
</head>
<body>
<select id="States" onclick="SBoxSetup('Capitals',STATES,this.value)">
<script type="text/javascript">SBoxSetup('States',STATES,'')</script>
</select>
<select id="Capitals">
<script type="text/javascript">SBoxSetup('Capitals',STATES,'x')</script>
</select>
</body>
</html>
Add more cities as you require.
Last edited by JMRKER; 08-22-2009 at 11:18 PM .
Thank You....
That saved me hours of programming in php.
You're most welcome.
problem
I found a problem with java I used.
The script provided was not 'java'. Might need to look at a different forum if a 'java' question/problem
Originally Posted by
JMRKER
Use this part in your HTML section
Code:
<html>
<head>
<title>Country-State Selections</title>
<script type="text/javascript" src="CountryStates.js"></script>
<script type="text/javascript">
function setup(ArrStr) {
s = document.getElementById('country');
var sl = s.options.length;
for (var i = sl-1; i >= 0 ; i--) { s.options[i] = null; }
var tmp = ArrStr.split('|');
for (i = 0; i < tmp.length; i++ ) {
s.options[i] = new Option(tmp[i],tmp[i],false,false);
}
}
function choice(ndx){
s = document.getElementById('states');
var sl = s.options.length;
for (var i = sl-1; i >= 0 ; i--) { s.options[i] = null; }
var tmp = aStates[ndx].split('|');
for (i = 0; i < tmp.length; i++ ) {
s.options[i] = new Option(tmp[i],tmp[i],false,false);
}
}
</script>
</head>
<body>
<select id='country' onchange='choice(this.selectedIndex)'>
<script type="text/javascript">setup(sCountryString)</script>
</select>
<select id='states'></select>
</body>
</html>
Then change the contents of the following external JS file.
Originally Posted by
rajat5
I have used this code and its working successfully..Thanx a lot 4 that but can u plz explain me how can i choose the value of the countries and states selected and store it in the database
Two things to consider:
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Reply With Quote
Modify this ...
query
Originally Posted by JMRKER
More information needed...
Bookmarks