More Dynamic Dropdown Boxes

Question:I would like to have a drop down selection box on the left side from which you can select an option--one at a time, and then ADD it to a list box on the right side. You have already addressed a similar scenario using dynamic option boxes but the selection from the first option box that is dynamically passed to the second option box is simply an option and not a selected value. And the values in the second option box would not be considered selected unless the user selects it from the second box by clicking. I would like everything that is passed to the second list box to be automatically selected or as a return delimited list box that would also allow you to remove a passed option from the list box. I realize I can accomplish multiple selections using <SELECT MULTIPLE> using only one SELECT box, however, this is clumsy for the user because only a few options can be displayed although there are many, and the user must scroll through a very long list to do the multiple selections--obliterating the rest of the input fields on the form. I want the user to be able to select an option one at a time and add it to another list box and if he screws up, he can also remove it. Could the ADD function be done with a GO button-- and also have another button that can be used to remove the passed option from the right side while actually removing options and reducing the list box size every time something is ADDED or REMOVED. This would be for the session. The first SELECT box would have to be populated for subsequent sessions. Hope you could help with this one.

Answer:The below code shows you how to populate a second drop down list from the first using an Add button and you can remove entries from the second list using the Remove button.

Note that while this script works in Internet Explorer, Netscape (both 4 and 6), and Opera 6+, it does not populate the second dropdown box in Opera 5 so you may want to advise your visitors of that.


The example form is coded as follows:

<form name="myform"><div class="centre">
<select name="optone" size="1">
<option value=" " selected="selected">
<option value="First Choice">First Choice</option>
<option value="Second Choice">Second Choice</option>
<option value="Third Choice">Third Choice</option>
<select name="opttwo" size="1">
<option value=" " selected="selected">Select entries from the list at left </option>
</select><br />&nbsp;<br />
<input type="button" name="add" value ="Add" onclick="addOptions(document.myform.optone.options[document.myform.optone.selectedIndex].text);" />
<input type="button" name="del" value ="Remove" onclick="delOptions(document.myform.opttwo.options[document.myform.opttwo.selectedIndex].text);" />

The Add button calls a javascript function called addOptions and passes it the value of the option selected in the first dropdown box. I've given the options values of 1, 2, and 3 but you can use whatever values you like and include as many options as you like. The Add function checks if the option has already been added and will only add an option once.

The Delete button rebuilds the list in the second dropdown box without the selected entry.

The javascript function needs to be included in the head section of your page in order for it to work. Here is the code:

function addOptions(chosen) {
var selbox = document.myform.opttwo;
if (selbox.options[0].value == " ") {
selbox.options.length = 0;
var fnd = 0;
for (n=0;n<selbox.length;n++){
if(selbox.options[n].text == chosen){
fnd = 1;
if (!fnd) selbox.options[selbox.options.length] = new Option(chosen, selbox.options.length);
function delOptions(chosen) {
var selbox = document.myform.opttwo;
if (selbox.options[0].value != " ") {
nomatch = new Array();
for (n=0;n<selbox.length;n++){
if(selbox.options[n].text != chosen){
nomatch[nomatch.length] = new Array(selbox.options[n].value, selbox.options[n].text);
selbox.options.length = 0;
if (nomatch.length == 0) {
selbox.options[0]= new Option("Select entries from the list at left"," ");
} else {
for (n=0;n<nomatch.length;n++){
selbox.options[n] = new Option(nomatch[n][1], nomatch[n] [0]);

You shouldn't need to change this javascript except for the value to display in the second list when it is empty.

So now your visitors can select the entries that they want from the first list populating the second list. Your subsequent processing would be done based on the contents of the second list.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow