Dynamic, Contextual Multiple Select Lists

LTeeple · Mar 16, 2005

Hi All,
I'm back with a new Javascript problem. If anyone can point out some resources, or suggest how to tackle this, I'd appreciate it. What I need is a multi-language script: Javascript and PHP. (I only need help with the Javascript portion).

Scenario: I have a select list multiple that is populated dynamically. In the corresponding select list multiple, I'd like to populate depending on what is selected in the first select list. If the selection changes in the first select list, then the second select list is changed.

http://130.15.82.39/random/test.htm

I appreciate any help.

[cheers]

Cheers!
Laura

cLFlaVA · Mar 16, 2005

well, i don't suggest doing an onchange or onclick. instead, i suggest you create a button between the two. because they are multiple select boxes, it might get kind of frustrating if, each time a user selects an option from the first, the page reloads.

there really isn't much on the javascript side, other than calling the form's submit() event when you want. the majority of this functionality should be done on the php side.

the javascript solution would be to fill arrays when the page loads, with possible values for each selection in the first select box. however, i suggest doing this server-side.

*cLFlaVA
----------------------------
[tt]a frickin' twelve-gauge, what do you think?[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

kaht · Mar 16, 2005

Laura, here's an example of how to do dynamic multiple listboxes. Just pull all the information for all the possibilities from the server and then store them in a 2 dimensional array. Then use the following function to display them. (You can copy/paste this into a new .html file to see how it works.)

Code:

<html>
<head>
<script language=javascript>

//create the content for the 2nd listbox
var listArr = new Array;
listArr[0] = new Array("Blue", "Orange", "Yellow", "Green", "Blue");
listArr[1] = new Array("One", "Two", "Three", "Four", "Five");

function dynamicListbox(num, obj) {
   obj.options.length = 0;
   for (i = 0; i < listArr[num].length; i++) {
      obj.options[i] = new Option(listArr[num][i], listArr[num][i]);
   }
}
   
</script>
</head>
<body>
<form name=blahForm>
<select multiple size=5 name=first onchange='dynamicListbox(this.selectedIndex, document.forms["blahForm"].elements["second"])'>
<option value=colors>Colors</option>
<option value=numbers>Numbers</option>
</select>
<select multiple size=5 name=second>
</select>
</form>
</body>
</html>

-kaht

Do the chickens have large talons?

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Dynamic, Contextual Multiple Select Lists

LTeeple

Programmer

cLFlaVA

Programmer

kaht

Programmer

Similar threads

Part and Inventory Search

Sponsor