Closed Thread Icon

Topic awaiting preservation: Intelinked list boxes Pages that link to <a href="https://ozoneasylum.com/backlink?for=26970" title="Pages that link to Topic awaiting preservation: Intelinked list boxes" rel="nofollow" >Topic awaiting preservation: Intelinked list boxes\

 
Author Thread
zoom
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Nov 2005

posted posted 11-07-2005 12:23

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

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

posted posted 11-07-2005 15:42

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

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted posted 11-07-2005 18:09

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 ]:.

« BackwardsOnwards »

Show Forum Drop Down Menu