Drop down list problem

I am trying to populate a drop down list based on another one. For example, the first drop down list has a selection of choices in it and next to it is an empty drop down box.

Each time I choose a value from the first box, it will jump over to the second box. Is there a way for me to do this?

 

I would accomplish this by using focus().

 

i spend ages trying to find some sort of tutorial on how to do this. could anyone give me a link to help me?

 

There is a free-script for that :

http://javascriptkit.com/script/cut183.shtml

 

this is not what im looking for.

the left box should be a multiple dropdown and the left empty. i want to select items from the left box and add them to the right box.

the reason i need it this way is because i need to select 4 items from a list and i dont want to have 4 dropdown boxes with the same information in each.

 

Dimension, can you post a link to a page showing what you have so far?

 

If you want to be able to select multiple items from a select list then you can just add the "multiple" attribute to the select element:

<select size="3" multiple="multiple">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
</select>

HTML:

Press "Ctrl" and click to select multiple options in the list. Size is the number of visible items.

 

Just add an onclick event handler for the first drop down box. Grab the highlighted value from there to determine what array of options you want to put in the second select box. Then (if you were using mootools)

var secondSelect = $('secondSelect');
secondSelect.empty(); // clears second
for (var i = 0; i < myOptionArray.length; ++i)
{
    secondSelect.adopt( new Element('option', {
           'value': myOptionArray[i].value
        })
        .setText(myOptionArray[i].text)
     );
}

Code (markup):