/    Sign up×
Community /Pin to ProfileBookmark

Country state drop down list

Copy linkTweet thisAlerts:
Jul 10.2007

Hi All,

?
can any one please guide me to make country-state-city drop down list?

what i mean is that when i select one country it will display all the states under and similarly the code should display cities under a state when i select it.

please help me in this regard

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@samanyoluJul 10.2007 — 
<script type="text/javascript">

var arr = [
["istanbul","izmir","Ankara", "Bursa"],
["Münih","Berlin"],
["New York", "Texas", "California"]
];
function fill() {
var el = document.getElementById('sel');
var el2 = document.getElementById('sel2');
el2.options.length = 0;
var s = el.selectedIndex;
if(s > 0) {
for(var i = 0; i< arr[s-1].length; i++) {
el2.options[el2.options.length] = new Option( arr[s-1][i], arr[s-1][i]);
}
}
}
</script>
<body>
<select id="sel" onchange="fill()">
<option value="">choose</option>
<option value="">Turkey</option>
<option value="">Germany</option>
<option value="">USA</option>
</select>

<select id="sel2">
</select>



The following code works. But I don't know it is right.
<br/>
&lt;script type="text/javascript"&gt;
var arr = [
["istanbul","izmir","Ankara", "Bursa"],
["Münih","Berlin"],
["New York", "Texas", "California"]
];

(myArray = {
myElement:function(id) { return document.getElementById(id);},
fill : function(a,b){
var el = myArray.myElement(a);
var el2 = myArray.myElement(b);
el2.options.length = 0;
var s = el.selectedIndex;
if(s &gt; 0) {
for(var i = 0; i&lt; arr[s-1].length; i++) {
el2.options[el2.options.length] = new Option( arr[s-1][i], arr[s-1][i]);
}
}
}
})
&lt;/script&gt;
&lt;body&gt;
&lt;select id="sel" onchange="myArray.fill( 'sel','sel2')"&gt;
&lt;option value=""&gt;choose&lt;/option&gt;
&lt;option value=""&gt;Turkey&lt;/option&gt;
&lt;option value=""&gt;Germany&lt;/option&gt;
&lt;option value=""&gt;USA&lt;/option&gt;
&lt;/select&gt;

&lt;select id="sel2"&gt;
&lt;/select&gt;

Copy linkTweet thisAlerts:
@SparoHawkJul 10.2007 — Well, there are two ways to do what you want.

1) Predefined arrays in JavaScript;

2) Hidden selects in HTML, which show and hide with JavaScript

3) Using AJAX to retrieve the information from a server.

Now, I prefer option #3 since it keeps my code nice and tidy, plus, I won't have to make a pilgrimage to some unknown city to change the values.

You would have all the needed information in a database, the AJAX would call a PHP, ASP or other programming language telling it to get X or Y information based on what you selected from the drop downs.

Which method would you like?
Copy linkTweet thisAlerts:
@LeeUJul 10.2007 — Here is one that has the countries and states. You would just need to adapt it to add the cities.
Copy linkTweet thisAlerts:
@mjdamatoJul 10.2007 — Here's a working example:
&lt;html&gt;
&lt;head&gt;

&lt;script type="text/javascript"&gt;


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

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


// City lists
var cities = new Array();

cities['Canada'] = new Array();
cities['Canada']['Alberta'] = new Array('Edmonton','Calgary');
cities['Canada']['British Columbia'] = new Array('Victoria','Vancouver');
cities['Canada']['Ontario'] = new Array('Toronto','Hamilton');

cities['Mexico'] = new Array();
cities['Mexico']['Baja California'] = new Array('Tijauna','Mexicali');
cities['Mexico']['Chihuahua'] = new Array('Ciudad Juárez','Chihuahua');
cities['Mexico']['Jalisco'] = new Array('Guadalajara','Chapala');

cities['United States'] = new Array();
cities['United States']['California'] = new Array('Los Angeles','San Francisco');
cities['United States']['Florida'] = new Array('Miami','Orlando');
cities['United States']['New York'] = new Array('Buffalo','new York');


function setStates(){

cntrySel = document.getElementById('country');
stateList = states[cntrySel.value];

changeSelect('state', stateList, stateList);
setCities();

}

function setCities(){

cntrySel = document.getElementById('country');
stateSel = document.getElementById('state');

cityList = cities[cntrySel.value][stateSel.value];

changeSelect('city', cityList, cityList);

}

function changeSelect(fieldID, newOptions, newValues) {

selectField = document.getElementById(fieldID);
selectField.options.length = 0;

for (i=0; i&lt;newOptions.length; i++) {
selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
}

}

&lt;/script&gt;

&lt;/head&gt;

&lt;body onload="setStates();"&gt;
&lt;form name="test" method="POST" action="processingpage.php"&gt;

Country:
&lt;select name="country" id="country" onchange="setStates();"&gt;
&lt;option value="Canada"&gt;Canada&lt;/option&gt;
&lt;option value="Mexico"&gt;Mexico&lt;/option&gt;
&lt;option value="United States"&gt;United States&lt;/option&gt;
&lt;/select&gt;
&lt;br&gt;

State:
&lt;select name="state" id="state" onchange="setCities();"&gt;
&lt;option value=""&gt;Please select a Country&lt;/option&gt;
&lt;/select&gt;
&lt;br&gt;

City:
&lt;select name="city" id="city"&gt;
&lt;option value=""&gt;Please select a Country&lt;/option&gt;
&lt;/select&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
×

Success!

Help @rkondaveeti spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...