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?
10  2221 
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> 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!
because these code is not follow the DOM standard.
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;
}
}
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 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.
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
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.
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
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. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: M B HONG 20 |
last post by:
Hi all -
I am aware that the window.open method of javascript can open new popup
windows with different properties. I wish to use the 'dependent'
parameter to open a window that does not hide...
|
by: Robert McLay |
last post by:
I'm trying to understand bytecodes generated on different machines.
I understand that the bytecodes can change between version. But since
I'm told that .pyc files are version dependent but not...
|
by: lorirobn |
last post by:
Hi,
I have a form with several combo boxes, continuous form format, with
record source a query off an Item Table. The fields are Category,
Subcategory, and Color. I am displaying descriptions,...
|
by: platostoteles |
last post by:
Hallo NG,
I am new to JavaScript and would really appreciate any help to solve my
problem.
I am using the blow code in my form to validate form fields. What I
would like to accomplish is that...
|
by: Ann |
last post by:
I am opening a file which looks like 0xABCDEF01 on another machine but
0x01EFCDAB on my machine.
Is this a byte swapping?
Could anyone give a good way to check if bytes are being swapped?...
|
by: embeddedc |
last post by:
Hi,
Referring to C90, is there somewhere published a list of all parts of
the standard where the behavior is not specified or implementation
dependent?
If not and I want to find all such...
|
by: puzzlecracker |
last post by:
See it a lot but haven't learn the difference between this two in the
context of template. Would someone explain it please?
Thanks
|
by: jmartmem |
last post by:
Greetings,
I have an ASP page with two dynamic dependent list boxes written in JavaScript. My dependent lists work great, but my problem is that the values for "Program_Name" and "Project_Name"...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
| |
