pgkooijman
asked on
Dynamic Select Box values from a Multiple Select Box
Hi, I am new here and let me open with the question which is the reason I joined this site:
I have a selection box multiple with countries which supports multiple selections being made. Depending on the Country or Countries selected in the countries box I want to change the options in the State box. I have got it working when only one Country is selected. Problem is that the State values are reset when I select multiple countries.
Is there a way to get the following: A client selects the USA from Countries. The State box is filled with the US states. Now when the client also selects France from Countries the list of US States remains and the French States are added giving me a list with both the US and the French States?
I have looked everywhere but cannot find this being done anywhere.
I have a selection box multiple with countries which supports multiple selections being made. Depending on the Country or Countries selected in the countries box I want to change the options in the State box. I have got it working when only one Country is selected. Problem is that the State values are reset when I select multiple countries.
Is there a way to get the following: A client selects the USA from Countries. The State box is filled with the US states. Now when the client also selects France from Countries the list of US States remains and the French States are added giving me a list with both the US and the French States?
I have looked everywhere but cannot find this being done anywhere.
eg
<html>
<head>
<script language=javascript>
var m_arr = new Array();
m_arr[0] = "blah 1|blah 2";
m_arr[1] = "blah 3|blah 4";
function sh(obj, o_objn)
{
f = obj.form;
other_obj = f[o_objn];
s = m_arr[obj.selectedIndex].s plit("|");
for(i=0;i<s.length;i++)
{
other_obj.options[i] = new Option(s[i], s[i]);
}
}
</script>
</head>
<body>
<form>
<select onChange="sh(this, 'otherselect')">
<option>menu 1</option>
<option>menu 2</option>
</select>
<select name="otherselect">
</select>
</form>
</body>
</html>
<html>
<head>
<script language=javascript>
var m_arr = new Array();
m_arr[0] = "blah 1|blah 2";
m_arr[1] = "blah 3|blah 4";
function sh(obj, o_objn)
{
f = obj.form;
other_obj = f[o_objn];
s = m_arr[obj.selectedIndex].s
for(i=0;i<s.length;i++)
{
other_obj.options[i] = new Option(s[i], s[i]);
}
}
</script>
</head>
<body>
<form>
<select onChange="sh(this, 'otherselect')">
<option>menu 1</option>
<option>menu 2</option>
</select>
<select name="otherselect">
</select>
</form>
</body>
</html>
ASKER
Thanks for the quick answer Xxavier, thinks work fast here it seems :)
I will give that a try but will that work with multiple selections? It should place the states for all the selected countries in the first selection box. Not replace them each time I click on another country.
Will get back to you.
I will give that a try but will that work with multiple selections? It should place the states for all the selected countries in the first selection box. Not replace them each time I click on another country.
Will get back to you.
be back in an hour customer come in.
ASKER
Like I expected that solution makes the States come up only for one Country. What makes this problem tricky is the support of multiple selections. Re-read my original question please.
To further illustrate using Xxavier's example: When both the first and second option from the first box are selected then the second box should give: blah 1,blah 2,blah 3,blah 4
At this moment it depends on what I click last which two blahs are shown.
To further illustrate using Xxavier's example: When both the first and second option from the first box are selected then the second box should give: blah 1,blah 2,blah 3,blah 4
At this moment it depends on what I click last which two blahs are shown.
ASKER
A possible solution I see would be to retrieve the values of all selected choices in the first selection box and loop through those adding the values for the second box as we go along. Just no clue on how to write such a thing....
ok try this
<html>
<head><script language="javascript">
Countries = new Array('Greece$Athens$Patra s$Larisa', 'Italy$Rom e$Milano$V alencia',' Spain$Madr ite$Barche lona$Baler o')
function fillCountries(){
document.form1.country.len gth = 1;
document.form1.country.opt ions[0].va lue = "none";
document.form1.country.opt ions[0].te xt = "(select)";
document.form1.country.sel ectedIndex = 0;
for(var i = 0; i < 3; i++){
var k = Countries[i].indexOf('$');
document.form1.country.opt ions[i].va lue = i + 1;
document.form1.country.opt ions[i].te xt = Countries[i].substring(0,k );
document.form1.country.len gth++;
}
document.form1.country.len gth = document.form1.country.len gth - 1;
}
function setStates(){
document.form1.states.leng th = 1;
document.form1.states.opti ons[0].val ue = "none";
document.form1.states.opti ons[0].tex t = "(select)";
document.form1.states.sele ctedIndex = 0;
var state = Countries[document.form1.c ountry.sel ectedIndex ];
var i = 0;
while(true){
var k = state.lastIndexOf('$');
if(k==-1)
break;
choice = state.substring(k+1,state. length);
state = state.substring(0,k);
document.form1.states.opti ons[i].val ue = i + 1;
document.form1.states.opti ons[i].tex t = choice;
document.form1.states.leng th++;
i++
}
document.form1.states.leng th = document.form1.states.leng th - 1;
}
</script>
<title></title>
</head>
<body onload="fillCountries()">
<form name="form1">
<p>Countries<br>
<select name="country" onChange="setStates()" size="1">
<option value="none">(select)</opt ion>
</select> <br>
States <br>
<select name="states" size="1">
<option value="none">(select)</opt ion>
</select> </p>
</form>
</body>
</html>
<html>
<head><script language="javascript">
Countries = new Array('Greece$Athens$Patra
function fillCountries(){
document.form1.country.len
document.form1.country.opt
document.form1.country.opt
document.form1.country.sel
for(var i = 0; i < 3; i++){
var k = Countries[i].indexOf('$');
document.form1.country.opt
document.form1.country.opt
document.form1.country.len
}
document.form1.country.len
}
function setStates(){
document.form1.states.leng
document.form1.states.opti
document.form1.states.opti
document.form1.states.sele
var state = Countries[document.form1.c
var i = 0;
while(true){
var k = state.lastIndexOf('$');
if(k==-1)
break;
choice = state.substring(k+1,state.
state = state.substring(0,k);
document.form1.states.opti
document.form1.states.opti
document.form1.states.leng
i++
}
document.form1.states.leng
}
</script>
<title></title>
</head>
<body onload="fillCountries()">
<form name="form1">
<p>Countries<br>
<select name="country" onChange="setStates()" size="1">
<option value="none">(select)</opt
</select> <br>
States <br>
<select name="states" size="1">
<option value="none">(select)</opt
</select> </p>
</form>
</body>
</html>
ASKER
Xxavier, tried that. Still when I select multiple of those three countries it still only gives me the states of 1 option not all the selected countries.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Hi,
here you go:
<html><head>
<script>
var usa= new Array("NY","CA","AZ","BK")
var france = new Array("Lyons","Paris","Orl eans")
var canada = new Array("Ottawa","Ontario"," British Columbia")
function doit(formObj)
{
selObj =formObj.countries
destObj = formObj.states
for (var i = 0; i < selObj.options.length; i++)
{
if (selObj.options[i].selecte d)
{
arrName = selObj.options[i].value
for (j = 0; j < window[arrName].length; j++)
destObj.options[destObj.le ngth] = new Option(window[arrName][j], window[arr Name][j])
}
}
}
</script>
</head>
<body>
<form name='a'>
<select name="countries" multiple>
<option value="usa">USA</option>
<option value="france">France</opt ion>
<option value="canada">Canada</opt ion>
</option>
</select>
<select name="states">
</select>
<input type="button" onclick=doit(this.form)>
</form>
</body>
</html>
Vinny
here you go:
<html><head>
<script>
var usa= new Array("NY","CA","AZ","BK")
var france = new Array("Lyons","Paris","Orl
var canada = new Array("Ottawa","Ontario","
function doit(formObj)
{
selObj =formObj.countries
destObj = formObj.states
for (var i = 0; i < selObj.options.length; i++)
{
if (selObj.options[i].selecte
{
arrName = selObj.options[i].value
for (j = 0; j < window[arrName].length; j++)
destObj.options[destObj.le
}
}
}
</script>
</head>
<body>
<form name='a'>
<select name="countries" multiple>
<option value="usa">USA</option>
<option value="france">France</opt
<option value="canada">Canada</opt
</option>
</select>
<select name="states">
</select>
<input type="button" onclick=doit(this.form)>
</form>
</body>
</html>
Vinny
<html>
<head><script>
Canada=new Array ("Bc","Alta","Sask","Mb"," Ont")
USA =new Array ("Al","Ark","Cal","Md","Tx ")
function update(obj,val)
{l=document.f1.mySelect.op tions.leng th
obj=document.f1.mySelect
switch (val)
{
case "USA" :
for (i=0;i<=4;i++)
obj.options[obj.options.le ngth] =new Option(USA[i],USA[i])
break;
case "Canada" :
for (i=0;i<=4;i++)
obj.options[obj.options.le ngth] =new Option(Canada[i],Canada[i] )
break;
default :
}
}
</script>
<title></title>
</head>
<body>
<form name="f1">
<p><select name="mySelect" size="1">
<option value="......">....</optio n>
</select></p>
<p><select size="1" onchange="update(this,this .value)">
<option value="USA">USA</option>
<option value="Canada">Canada</opt ion>
<option selected value="<select>">< ;select> ;</option>
</select></p>
</form>
</body>
</html>
<head><script>
Canada=new Array ("Bc","Alta","Sask","Mb","
USA =new Array ("Al","Ark","Cal","Md","Tx
function update(obj,val)
{l=document.f1.mySelect.op
obj=document.f1.mySelect
switch (val)
{
case "USA" :
for (i=0;i<=4;i++)
obj.options[obj.options.le
break;
case "Canada" :
for (i=0;i<=4;i++)
obj.options[obj.options.le
break;
default :
}
}
</script>
<title></title>
</head>
<body>
<form name="f1">
<p><select name="mySelect" size="1">
<option value="......">....</optio
</select></p>
<p><select size="1" onchange="update(this,this
<option value="USA">USA</option>
<option value="Canada">Canada</opt
<option selected value="<select>"><
</select></p>
</form>
</body>
</html>
sorry no need for tht obj param in function update(obj,val)
ASKER
Thanks Guys for all the input!
I tried them all and only Devic's solution seems to work like it is supposed to. My only question before I rap this question up: will this work on all browsers and if not which are excluded? I tested it on IE6 and NS7. How far back can we go before this stops working?
Thanks again guys, this platform finally seems to be what I am looking for!
I tried them all and only Devic's solution seems to work like it is supposed to. My only question before I rap this question up: will this work on all browsers and if not which are excluded? I tested it on IE6 and NS7. How far back can we go before this stops working?
Thanks again guys, this platform finally seems to be what I am looking for!
here is the code tidied up a bit
<html>
<head><script>
Canada=new Array ("Bc","Alta","Sask","Mb"," Ont")
USA =new Array ("Al","Ark","Cal","Md","Tx ")
function update(val)
{
obj=document.f1.mySelect
switch (val)
{
case "USA" :
for (i=0;i<=USA.length-1;i++)
obj.options[obj.options.le ngth] =new Option(USA[i],USA[i])
break;
case "Canada" :
for (i=0;i<=Canada.length-1;i+ +)
obj.options[obj.options.le ngth] =new Option(Canada[i],Canada[i] )
break;
default :
}
}
</script>
<title></title>
</head>
<body>
<form name="f1">
<p><select name="mySelect" size="1">
</select></p>
<p><select size="1" onchange="update(this.valu e)">
<option>Select</option>
<option value="USA">USA</option>
<option value="Canada">Canada</opt ion>
</select></p>
</form>
</body>
</html>
<html>
<head><script>
Canada=new Array ("Bc","Alta","Sask","Mb","
USA =new Array ("Al","Ark","Cal","Md","Tx
function update(val)
{
obj=document.f1.mySelect
switch (val)
{
case "USA" :
for (i=0;i<=USA.length-1;i++)
obj.options[obj.options.le
break;
case "Canada" :
for (i=0;i<=Canada.length-1;i+
obj.options[obj.options.le
break;
default :
}
}
</script>
<title></title>
</head>
<body>
<form name="f1">
<p><select name="mySelect" size="1">
</select></p>
<p><select size="1" onchange="update(this.valu
<option>Select</option>
<option value="USA">USA</option>
<option value="Canada">Canada</opt
</select></p>
</form>
</body>
</html>
tested on:
IE 6
Mozilla 1.4
Netscape 7.02
Opera 7.11
and has nothing to be difficult for browsers ;)
IE 6
Mozilla 1.4
Netscape 7.02
Opera 7.11
and has nothing to be difficult for browsers ;)
Hi
devic's will work for all, though you may not be thrilled with the way it looks in NN4
correction for my code:
function doit(formObj)
{
selObj =formObj.countries
destObj = formObj.states
destObj.length = 0;
Vinny
devic's will work for all, though you may not be thrilled with the way it looks in NN4
correction for my code:
function doit(formObj)
{
selObj =formObj.countries
destObj = formObj.states
destObj.length = 0;
Vinny
after this line:
f.city.options[f.city.leng th-1].text =Countries [f.country [i].value* 1-1][j+1];
add this line:
f.city.options[f.city.leng th-1].valu e=Countrie s[f.countr y[i].value *1-1][j+1] ;
it was test and i forgot to insert value ;)
f.city.options[f.city.leng
add this line:
f.city.options[f.city.leng
it was test and i forgot to insert value ;)
ASKER
Ok, thanks Devic and other guys. I have accepted Devic's answer. I am new so I hope this was how the system is meant to be used.....
https://www.experts-exchange.com/questions/11145986/changing-a-select-dropdown-content.html