By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,384 Members | 1,847 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,384 IT Pros & Developers. It's quick & easy.

select1 dependent on select2

P: n/a
Hi, I have two select boxes, like country and province.
When a user select a country the list of provinces should change.
How might one go about doing this?

Sep 20 '06 #1
Share this Question
Share on Google+
10 Replies


P: n/a

Mark wrote:
Hi, I have two select boxes, like country and province.
When a user select a country the list of provinces should change.
How might one go about doing this?
add onchange to select1, codes like this:
(it worked in IE7 and Opera9, BUT it not worked in FF2b)

<html>
<head>
</head>
<body>
<select id="select1" onchange="select1_change();">
<option>aaa</option>
<option>bbb</option>
</select>
<select id="select2">
<option>xxx</option>
</select>
<script>
//add onchange to select1, write like this:
function select1_change()
{
var select2 = document.getElementById("select2");
for (var i = 0; i < select2.options.length; i++)
{
select2.options.remove(i);
}
select2.options.add(new Option("hello", "1"));
}
</script>
</body>
</html>

Sep 20 '06 #2

P: n/a

jh*****@gmail.com wrote:
Mark wrote:
Hi, I have two select boxes, like country and province.
When a user select a country the list of provinces should change.
How might one go about doing this?

add onchange to select1, codes like this:
(it worked in IE7 and Opera9, BUT it not worked in FF2b)

<html>
<head>
</head>
<body>
<select id="select1" onchange="select1_change();">
<option>aaa</option>
<option>bbb</option>
</select>
<select id="select2">
<option>xxx</option>
</select>
<script>
//add onchange to select1, write like this:
function select1_change()
{
var select2 = document.getElementById("select2");
for (var i = 0; i < select2.options.length; i++)
{
select2.options.remove(i);
}
select2.options.add(new Option("hello", "1"));
}
</script>
</body>
</html>
hmm... i wonder why it doesn't work in firefox? oh well. this should be
enough to get me started. thanks a ton!

Sep 20 '06 #3

P: n/a
because these code is not follow the DOM standard.

Sep 20 '06 #4

P: n/a
do you think this is a bit excessive?

function updateRegion()
{
var region = document.getElementById("region");
var country = document.getElementById("country");
var label = document.getElementById("region_label");
var id = country.options[country.selectedIndex].value;

while(region.options.length 0)
region.remove(0);

switch(id) {
case '1':
country.style.width="127px";
region.style.display = "";
region.options.add(new Option("Alberta","51"));
region.options.add(new Option("British Columbia","52"));
region.options.add(new Option("Manitoba","53"));
region.options.add(new Option("New Brunswick","54"));
region.options.add(new Option("Newfoundland and Labrador","55"));
region.options.add(new Option("Northwest Territories","56"));
region.options.add(new Option("Nova Scotia","57"));
region.options.add(new Option("Nunavut","58"));
region.options.add(new Option("Ontario","59"));
region.options.add(new Option("Prince Edward Island","60"));
region.options.add(new Option("Quebec","61"));
region.options.add(new Option("Saskatchewan","62"));
region.options.add(new Option("Yukon","63"));
break;
case '2':
country.style.width="127px";
region.style.display = "";
region.options.add(new Option("Alabama","1"));
region.options.add(new Option("Alaska","2"));
region.options.add(new Option("Arizona","3"));
region.options.add(new Option("Arkansas","4"));
region.options.add(new Option("California","5"));
region.options.add(new Option("Carolina","40"));
region.options.add(new Option("Carolina","33"));
region.options.add(new Option("Colorado","6"));
region.options.add(new Option("Connecticut","7"));
region.options.add(new Option("Dakota","41"));
region.options.add(new Option("Dakota","34"));
region.options.add(new Option("Delaware","8"));
region.options.add(new Option("Florida","9"));
region.options.add(new Option("Georgia","10"));
region.options.add(new Option("Hampshire","29"));
region.options.add(new Option("Hawaii","11"));
region.options.add(new Option("Idaho","12"));
region.options.add(new Option("Illinois","13"));
region.options.add(new Option("Indiana","14"));
region.options.add(new Option("Iowa","15"));
region.options.add(new Option("Island","39"));
region.options.add(new Option("Jersey","30"));
region.options.add(new Option("Kansas","16"));
region.options.add(new Option("Kentucky","17"));
region.options.add(new Option("Louisiana","18"));
region.options.add(new Option("Maine","19"));
region.options.add(new Option("Maryland","20"));
region.options.add(new Option("Massachusetts","21"));
region.options.add(new Option("Mexico","31"));
region.options.add(new Option("Michigan","22"));
region.options.add(new Option("Minnesota","23"));
region.options.add(new Option("Mississippi","24"));
region.options.add(new Option("Missouri","25"));
region.options.add(new Option("Montana","26"));
region.options.add(new Option("Nebraska","27"));
region.options.add(new Option("Nevada","28"));
region.options.add(new Option("Ohio","35"));
region.options.add(new Option("Oklahoma","36"));
region.options.add(new Option("Oregon","37"));
region.options.add(new Option("Pennsylvania","38"));
region.options.add(new Option("Tennessee","42"));
region.options.add(new Option("Texas","43"));
region.options.add(new Option("Utah","44"));
region.options.add(new Option("Vermont","45"));
region.options.add(new Option("Virginia","48"));
region.options.add(new Option("Virginia","46"));
region.options.add(new Option("Washington","47"));
region.options.add(new Option("Wisconsin","49"));
region.options.add(new Option("Wyoming","50"));
region.options.add(new Option("York","32"));
break;
case '187':
country.style.width="127px";
region.style.display = "";
region.options.add(new Option("Eastern Cape","64"));
region.options.add(new Option("Free State","65"));
region.options.add(new Option("Gauteng","66"));
region.options.add(new Option("KwaZulu-Natal","67"));
region.options.add(new Option("Limpopo","68"));
region.options.add(new Option("Mpumalanga","69"));
region.options.add(new Option("North West Province","70"));
region.options.add(new Option("Northern Cape","71"));
region.options.add(new Option("Western Cape","72"));
break;
default:
label.innerHTML = "Country";
region.style.display = "none";
country.style.width="100%";
break;
}
updateLabel();
}

function updateLabel()
{
var region = document.getElementById("region");
var label = document.getElementById("region_label");
var id = region.options[region.selectedIndex].value;

switch(id) {
case '71':
case '60':
case '59':
case '57':
case '55':
case '54':
case '53':
case '52':
case '51':
case '61':
case '62':
case '72':
case '70':
case '69':
case '68':
case '67':
case '66':
case '65':
case '64':
label.innerHTML = "Province";
break;
case '42':
case '41':
case '40':
case '39':
case '38':
case '37':
case '43':
case '44':
case '45':
case '46':
case '47':
case '48':
case '49':
case '50':
case '10':
case '36':
case '35':
case '16':
case '15':
case '14':
case '13':
case '12':
case '11':
case '9':
case '8':
case '7':
case '6':
case '5':
case '4':
case '3':
case '2':
case '1':
case '17':
case '18':
case '19':
case '34':
case '33':
case '32':
case '31':
case '30':
case '29':
case '28':
case '27':
case '26':
case '25':
case '24':
case '23':
case '22':
case '21':
case '20':
label.innerHTML = "State";
break;
case '58':
case '56':
case '63':
label.innerHTML = "Territory";
break;
}
}

Sep 21 '06 #5

P: n/a

Mark wrote:
do you think this is a bit excessive?

function updateRegion()
{
var region = document.getElementById("region");
var country = document.getElementById("country");
var label = document.getElementById("region_label");
var id = country.options[country.selectedIndex].value;

while(region.options.length 0)
region.remove(0);

switch(id) {
case '1':
country.style.width="127px";
region.style.display = "";
region.options.add(new Option("Alberta","51"));
region.options.add(new Option("British Columbia","52"));
region.options.add(new Option("Manitoba","53"));
region.options.add(new Option("New Brunswick","54"));
region.options.add(new Option("Newfoundland and Labrador","55"));
region.options.add(new Option("Northwest Territories","56"));
region.options.add(new Option("Nova Scotia","57"));
region.options.add(new Option("Nunavut","58"));
region.options.add(new Option("Ontario","59"));
region.options.add(new Option("Prince Edward Island","60"));
region.options.add(new Option("Quebec","61"));
region.options.add(new Option("Saskatchewan","62"));
region.options.add(new Option("Yukon","63"));
break;
case '2':
country.style.width="127px";
region.style.display = "";
region.options.add(new Option("Alabama","1"));
region.options.add(new Option("Alaska","2"));
region.options.add(new Option("Arizona","3"));
region.options.add(new Option("Arkansas","4"));
region.options.add(new Option("California","5"));
region.options.add(new Option("Carolina","40"));
region.options.add(new Option("Carolina","33"));
region.options.add(new Option("Colorado","6"));
region.options.add(new Option("Connecticut","7"));
region.options.add(new Option("Dakota","41"));
region.options.add(new Option("Dakota","34"));
region.options.add(new Option("Delaware","8"));
region.options.add(new Option("Florida","9"));
region.options.add(new Option("Georgia","10"));
region.options.add(new Option("Hampshire","29"));
region.options.add(new Option("Hawaii","11"));
region.options.add(new Option("Idaho","12"));
region.options.add(new Option("Illinois","13"));
region.options.add(new Option("Indiana","14"));
region.options.add(new Option("Iowa","15"));
region.options.add(new Option("Island","39"));
region.options.add(new Option("Jersey","30"));
region.options.add(new Option("Kansas","16"));
region.options.add(new Option("Kentucky","17"));
region.options.add(new Option("Louisiana","18"));
region.options.add(new Option("Maine","19"));
region.options.add(new Option("Maryland","20"));
region.options.add(new Option("Massachusetts","21"));
region.options.add(new Option("Mexico","31"));
region.options.add(new Option("Michigan","22"));
region.options.add(new Option("Minnesota","23"));
region.options.add(new Option("Mississippi","24"));
region.options.add(new Option("Missouri","25"));
region.options.add(new Option("Montana","26"));
region.options.add(new Option("Nebraska","27"));
region.options.add(new Option("Nevada","28"));
region.options.add(new Option("Ohio","35"));
region.options.add(new Option("Oklahoma","36"));
region.options.add(new Option("Oregon","37"));
region.options.add(new Option("Pennsylvania","38"));
region.options.add(new Option("Tennessee","42"));
region.options.add(new Option("Texas","43"));
region.options.add(new Option("Utah","44"));
region.options.add(new Option("Vermont","45"));
region.options.add(new Option("Virginia","48"));
region.options.add(new Option("Virginia","46"));
region.options.add(new Option("Washington","47"));
region.options.add(new Option("Wisconsin","49"));
region.options.add(new Option("Wyoming","50"));
region.options.add(new Option("York","32"));
break;
case '187':
country.style.width="127px";
region.style.display = "";
region.options.add(new Option("Eastern Cape","64"));
region.options.add(new Option("Free State","65"));
region.options.add(new Option("Gauteng","66"));
region.options.add(new Option("KwaZulu-Natal","67"));
region.options.add(new Option("Limpopo","68"));
region.options.add(new Option("Mpumalanga","69"));
region.options.add(new Option("North West Province","70"));
region.options.add(new Option("Northern Cape","71"));
region.options.add(new Option("Western Cape","72"));
break;
default:
label.innerHTML = "Country";
region.style.display = "none";
country.style.width="100%";
break;
}
updateLabel();
}

function updateLabel()
{
var region = document.getElementById("region");
var label = document.getElementById("region_label");
var id = region.options[region.selectedIndex].value;

switch(id) {
case '71':
case '60':
case '59':
case '57':
case '55':
case '54':
case '53':
case '52':
case '51':
case '61':
case '62':
case '72':
case '70':
case '69':
case '68':
case '67':
case '66':
case '65':
case '64':
label.innerHTML = "Province";
break;
case '42':
case '41':
case '40':
case '39':
case '38':
case '37':
case '43':
case '44':
case '45':
case '46':
case '47':
case '48':
case '49':
case '50':
case '10':
case '36':
case '35':
case '16':
case '15':
case '14':
case '13':
case '12':
case '11':
case '9':
case '8':
case '7':
case '6':
case '5':
case '4':
case '3':
case '2':
case '1':
case '17':
case '18':
case '19':
case '34':
case '33':
case '32':
case '31':
case '30':
case '29':
case '28':
case '27':
case '26':
case '25':
case '24':
case '23':
case '22':
case '21':
case '20':
label.innerHTML = "State";
break;
case '58':
case '56':
case '63':
label.innerHTML = "Territory";
break;
}
}
this works in firefox btw

Sep 21 '06 #6

P: n/a

jh*****@gmail.com wrote:
because these code is not follow the DOM standard.
actually...

function select1_change()
{
var select2 = document.getElementById("select2");
for (var i = 0; i < select2.options.length; i++)
{
select2.options.remove(i);
}
select2.options.add(new Option("hello", "1"));
}

i think you messed up your for loop :)
each time you remove an option, options.length shrinks...

when you remove option 0, option 1 becomes to new option 0, and then
when you remove option 1, you are actually removing the old option 2...
so now you skipped right over the original option 1... and ..basically
half the stuff doesnt get removed.

a method i found on another site was to start i at options.length - 1
and decrement the counter..but i think my solution is even more clever
as it doesn't need a counter at all.

Sep 21 '06 #7

P: n/a

Mark wrote:
do you think this is a bit excessive?
Yes. Wherever you have vast slabs of indentical code, you can be
certain there's a faster way. Making the second select dependent on
the first means that users without javascript or with it turned off
will not be able to select a region.

Have a look at the example below, not all US states have been added.:

<script type="text/javascript">

var dataObj = {
countries :
{'Canada' : 'Province',
'USA' : 'State',
'South Africa' : 'Territory'
},
regions :
{'CanadaProvince' :
['Alberta', 'British Columbia','Manitoba',
'New Brunswick', 'Newfoundland and Labrador',
'Northwest Territories', 'Nova Scotia', 'Nunavut',
'Ontario', 'Prince Edward Island', 'Quebec',
'Saskatchewan', 'Yukon'],
'USAState' :
['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
'Carolina', 'Carolina', 'Colorado', 'Connecticut',
'Dakota', 'Dakota', 'Delaware', 'Florida'],
'South AfricaTerritory' :
['Eastern Cape', 'Free State', 'Gauteng', 'KwaZulu-Natal',
'Limpopo', 'Mpumalanga', 'North West Province',
'Northern Cape', 'Western Cape']
}
}

function updateRegion(selectA, selectID){
var selIndex = selectA.selectedIndex;
var regionSel = selectA.form.elements[selectID];
var regionLabelEl = document.getElementById('regionLabel');
regionSel.length = 0;

if (0 == selIndex) {
regionSel.options[0] = new Option('Select a Country first');
regionLabel.innerHTML = 'Region';
return;
}

var country = selectA[selIndex].text;
var regionLabel = dataObj.countries[country];
var regionArray = dataObj.regions[country + regionLabel];
regionLabelEl.innerHTML = regionLabel;

for (var i=0, len=regionArray.length; i<len; i++){
regionSel.options[i] = new Option(regionArray[i]);
}
}

window.onload = function(){
document.forms['countryForm'].reset();
}

</script>

<form name="countryForm" action=""><div>
Country
<select onchange="updateRegion(this, 'regionSelect');"
style="width: 10em;">
<option selected>Select a country
<option>Canada
<option>South Africa
<option>USA
</select>
<span id="regionLabel">Region</span>
<select id="regionSelect" style="width: 15em;">
<option>Select a Country first
</select>
</div></form>
--
Rob

Sep 21 '06 #8

P: n/a

RobG wrote:
Mark wrote:
do you think this is a bit excessive?

Yes. Wherever you have vast slabs of indentical code, you can be
certain there's a faster way. Making the second select dependent on
the first means that users without javascript or with it turned off
will not be able to select a region.

Have a look at the example below, not all US states have been added.:

<script type="text/javascript">

var dataObj = {
countries :
{'Canada' : 'Province',
'USA' : 'State',
'South Africa' : 'Territory'
},
regions :
{'CanadaProvince' :
['Alberta', 'British Columbia','Manitoba',
'New Brunswick', 'Newfoundland and Labrador',
'Northwest Territories', 'Nova Scotia', 'Nunavut',
'Ontario', 'Prince Edward Island', 'Quebec',
'Saskatchewan', 'Yukon'],
'USAState' :
['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
'Carolina', 'Carolina', 'Colorado', 'Connecticut',
'Dakota', 'Dakota', 'Delaware', 'Florida'],
'South AfricaTerritory' :
['Eastern Cape', 'Free State', 'Gauteng', 'KwaZulu-Natal',
'Limpopo', 'Mpumalanga', 'North West Province',
'Northern Cape', 'Western Cape']
}
}

function updateRegion(selectA, selectID){
var selIndex = selectA.selectedIndex;
var regionSel = selectA.form.elements[selectID];
var regionLabelEl = document.getElementById('regionLabel');
regionSel.length = 0;

if (0 == selIndex) {
regionSel.options[0] = new Option('Select a Country first');
regionLabel.innerHTML = 'Region';
return;
}

var country = selectA[selIndex].text;
var regionLabel = dataObj.countries[country];
var regionArray = dataObj.regions[country + regionLabel];
regionLabelEl.innerHTML = regionLabel;

for (var i=0, len=regionArray.length; i<len; i++){
regionSel.options[i] = new Option(regionArray[i]);
}
}

window.onload = function(){
document.forms['countryForm'].reset();
}

</script>

<form name="countryForm" action=""><div>
Country
<select onchange="updateRegion(this, 'regionSelect');"
style="width: 10em;">
<option selected>Select a country
<option>Canada
<option>South Africa
<option>USA
</select>
<span id="regionLabel">Region</span>
<select id="regionSelect" style="width: 15em;">
<option>Select a Country first
</select>
</div></form>
--
Rob
doesn't look terribly much more efficient. it still has to loop through
each region to add the options. the only difference is that it doesnt
have to change the label based on each region..which i did quite
deliberately, as canada has both provinces and territories (south
africa only has provinces).

the list was generated via php from a database btw, i'm not completely
insane :)

yeah..i know non-javascript users won't be able to view the lists
properly, but..most people *do* have javascript enabled, no?

anyway, i'll worry about that minority later.. i can just have a
masterlist for non-js'ers and then shorter lists via JS.

anyways, thanks. i'll see what i can do with this when i get some spare
time.

Sep 25 '06 #9

P: n/a

Mark wrote:
RobG wrote:
Mark wrote:
do you think this is a bit excessive?
Yes. Wherever you have vast slabs of indentical code, you can be
certain there's a faster way.
[...]
doesn't look terribly much more efficient. it still has to loop through
each region to add the options. the only difference is that it doesnt
have to change the label based on each region..which i did quite
deliberately, as canada has both provinces and territories (south
africa only has provinces).
For Canada, change "Province" to "Province or Territory" and
'CanadaProvince' to "CanadaProvince or Territory". You might choose a
different model, I just picked the first one that came to mind.

Of course you still have to loop throught the data, however your
solution (even if it's generated) requires significantly more code to
download and grows by 2 lines for each extra region - my example just
requires more elements in the data object.

The difference in download time will become more noticeable as you add
more countries and regions (there are about 200 or so altogether, with
many more region types).

the list was generated via php from a database btw, i'm not completely
insane :)
I didn't think you were, my suggested data object should be generated
the same way.
:-)
--
Rob

Sep 25 '06 #10

P: n/a

RobG wrote:
Mark wrote:
RobG wrote:
Mark wrote:
do you think this is a bit excessive?
>
Yes. Wherever you have vast slabs of indentical code, you can be
certain there's a faster way.
[...]
doesn't look terribly much more efficient. it still has to loop through
each region to add the options. the only difference is that it doesnt
have to change the label based on each region..which i did quite
deliberately, as canada has both provinces and territories (south
africa only has provinces).

For Canada, change "Province" to "Province or Territory" and
'CanadaProvince' to "CanadaProvince or Territory". You might choose a
different model, I just picked the first one that came to mind.

Of course you still have to loop throught the data, however your
solution (even if it's generated) requires significantly more code to
download and grows by 2 lines for each extra region - my example just
requires more elements in the data object.

The difference in download time will become more noticeable as you add
more countries and regions (there are about 200 or so altogether, with
many more region types).

the list was generated via php from a database btw, i'm not completely
insane :)

I didn't think you were, my suggested data object should be generated
the same way.
:-)
--
Rob
ahh.. good point. download times :)
and..i guess your solution is a bit neater too.
i don't really plan on adding more provinces/states/territories for
other countries..unless by some miracle my site gains popularity.

as of now... i have had 12 unique visitors :D which i'm actually quite
impressed by.

the filesize is only about 5 kb right now, so it's not too bad :p but
i'm always looking for the best solution..hence why i'm here.

thanks again.

Sep 25 '06 #11

This discussion thread is closed

Replies have been disabled for this discussion.