Topic awaiting preservation: Intelinked list boxes (Page 1 of 1)

Hi all,

I want to create 2 list boxes, where the item selected in the first list box decides the content of the next box.
The problem is something like this:

There are list of games and number of maximum players allowed in each game both should be represented as the list boxes, however for a given game user should have the option of selecting number of players not exceeding maximum number of players for that game.

Sample list might look like this.

Game players

football 11
Basket ball 6
Tennis 4
base ball 10


For instance, If the user selects "Basket ball" he can pick any number of players right from 1 to 6 (In fact list should show only maximum of 6 elements in the list box. However, in case of football it should show 11 elemets in the list).

Hope Im clear in explaing the issue. Im new to UI related issues (wokring mostly on backend issues ) ...so please suggest me a good approach for this... I know this can be accomplished using the <div> tags.

But how to interlink both list boxes ?

Please suggest me on solving this problem?


Thx in advance.

Regards
zoom

http://www.gazingus.org/html/menuExpandable3.html ?

This is pretty easy.

first you want to put an "onchange" handler on the first list box

<select name="sport" onchange="populateSecondBox(this)">


And name your second box
<select name="players">

then you need to dynamically create the options for the second box. Because you are just using numbers this is pretty easy.

First set up an array of values for the max lengths these should be in the same order of the options in the select
maxlens = array( 11,6,4,100 )

function populateSecondBox( ) {

// first clear out the second select
document.forms[0].elements.players.length = 0;
// Now populate it.

for(i=0;i<maxlens[ document.forms.elements.sports.selectedIndex] ;i++) {
document.forms[0].elements.players.options[i] = new Option(i,i);
}



}

That's about it.



.:[ Never resist a perfect moment ]:.