Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Dynamic Select Box values from a Multiple Select Box

Posted on 2003-10-27
18
Medium Priority
?
2,128 Views
Last Modified: 2012-06-27
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.
0
Comment
Question by:pgkooijman
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 6
  • 3
  • +1
18 Comments
 
LVL 7

Expert Comment

by:Xxavier
ID: 9629127
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].split("|");
     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>
0
 

Author Comment

by:pgkooijman
ID: 9629204
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.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 7

Expert Comment

by:Xxavier
ID: 9629233
be back in an hour customer come in.
0
 

Author Comment

by:pgkooijman
ID: 9629375
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.
0
 

Author Comment

by:pgkooijman
ID: 9629630
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....
0
 
LVL 7

Expert Comment

by:Xxavier
ID: 9629696
ok try this

<html>

<head><script language="javascript">
Countries = new Array('Greece$Athens$Patras$Larisa','Italy$Rome$Milano$Valencia','Spain$Madrite$Barchelona$Balero')

function fillCountries(){
document.form1.country.length = 1;
document.form1.country.options[0].value = "none";
document.form1.country.options[0].text = "(select)";
document.form1.country.selectedIndex = 0;
for(var i = 0; i < 3; i++){
var k = Countries[i].indexOf('$');
document.form1.country.options[i].value = i + 1;
document.form1.country.options[i].text = Countries[i].substring(0,k);
document.form1.country.length++;
}
document.form1.country.length = document.form1.country.length - 1;
}

function setStates(){
document.form1.states.length = 1;
document.form1.states.options[0].value = "none";
document.form1.states.options[0].text = "(select)";
document.form1.states.selectedIndex = 0;
var state = Countries[document.form1.country.selectedIndex];
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.options[i].value = i + 1;
document.form1.states.options[i].text = choice;
document.form1.states.length++;
i++
}
document.form1.states.length = document.form1.states.length - 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)</option>
  </select> <br>
  States <br>
  <select name="states" size="1">
    <option value="none">(select)</option>
  </select> </p>
</form>
</body>
</html>
0
 

Author Comment

by:pgkooijman
ID: 9629760
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.
0
 
LVL 25

Accepted Solution

by:
devic earned 1000 total points
ID: 9630099
hi pgkooijman,

try this:
==========================================
<html>
<body>
<script>
Countries = new Array(
      new Array("Greece","Athens","Patras","Larisa"),
      new Array("Italy","Rome","Milano","Valencia"),
      new Array("Spain","Madrid","Barselona","Balero")
)
function fillcountry(f)
{
      f.city.length=null;
      for(var i=0; i<f.country.length;i++)
      {
            if(f.country[i].selected)
            {
                  for(var j=0;j<Countries[f.country[i].value*1-1].length-1;j++)
                  {
                        f.city.length++;
                        f.city.options[f.city.length-1].text=Countries[f.country[i].value*1-1][j+1]
                  }
            }
      }
}
</script>
<form>
      <select onchange=fillcountry(this.form) name=country multiple size=5>
            <option value=1>Greece
            <option value=2>Italy
            <option value=3>Spain
      </select>
      <select name=city>
            <option>select city
      </select>
</form>

</body>
</html>
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9630144
Hi,
here you go:

<html><head>
<script>
var usa= new Array("NY","CA","AZ","BK")
var france = new Array("Lyons","Paris","Orleans")
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].selected)
    {
       arrName = selObj.options[i].value
       for (j = 0; j < window[arrName].length; j++)
       destObj.options[destObj.length] = new Option(window[arrName][j],window[arrName][j])
    }
  }
}
</script>
</head>
<body>
<form name='a'>
<select name="countries" multiple>
<option value="usa">USA</option>
<option value="france">France</option>
<option value="canada">Canada</option>
</option>
</select>
<select name="states">
</select>
<input type="button" onclick=doit(this.form)>
</form>
</body>
</html>

  Vinny
0
 
LVL 7

Expert Comment

by:Xxavier
ID: 9630197
<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.options.length
obj=document.f1.mySelect
switch (val)
 {
      case "USA" :
     
      for (i=0;i<=4;i++)
             obj.options[obj.options.length] =new Option(USA[i],USA[i])
 
break;
case "Canada" :
 for (i=0;i<=4;i++)
             obj.options[obj.options.length] =new Option(Canada[i],Canada[i])

break;
 
default :
 }
}
</script>

<title></title>
</head>

<body>

<form name="f1">
  <p><select name="mySelect" size="1">
    <option value="......">....</option>
  </select></p>
  <p><select size="1" onchange="update(this,this.value)">
    <option value="USA">USA</option>
    <option value="Canada">Canada</option>
    <option selected value="&lt;select&gt;">&lt;select&gt;</option>
  </select></p>
</form>
</body>
</html>
0
 
LVL 7

Expert Comment

by:Xxavier
ID: 9630208
sorry no need for tht obj param in     function update(obj,val)
0
 

Author Comment

by:pgkooijman
ID: 9630441
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!

0
 
LVL 7

Expert Comment

by:Xxavier
ID: 9630451
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.length] =new Option(USA[i],USA[i])
 
      break;
      case "Canada" :
      for (i=0;i<=Canada.length-1;i++)
             obj.options[obj.options.length] =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.value)">
    <option>Select</option>
    <option value="USA">USA</option>
    <option value="Canada">Canada</option>
  </select></p>
</form>
</body>
</html>
0
 
LVL 25

Expert Comment

by:devic
ID: 9630477
tested on:
IE 6
Mozilla 1.4
Netscape 7.02
Opera 7.11

and has nothing to be difficult for browsers ;)
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9630479
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
0
 
LVL 25

Expert Comment

by:devic
ID: 9630485
after this line:
f.city.options[f.city.length-1].text=Countries[f.country[i].value*1-1][j+1];

add this line:
f.city.options[f.city.length-1].value=Countries[f.country[i].value*1-1][j+1];

it was test and i forgot to insert value ;)
0
 

Author Comment

by:pgkooijman
ID: 9630667
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.....
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

715 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question