Question

I am trying to create three drop down menus (a list of activity choices), for a person to show top three preferences. I would like to have the second and third menus automatically remove the previously selected choices as options. I have only programmed in the three identical drop down menus:

<div id="satellites">
<p><b>Satellite Choices</b><br />
List your first, second, and third choices.  You will be given your first choice if it is not full.  ALL events have limited capacity. If you do not choose a satellite, one will be assigned for you.<br />
<label>First Choice*: </label><select name="satellite1 id="firstchoice" required="required""><br />
<option value="art"/>Art</option><br />
<option value="basketball"/>Basketball</option><br />
<option value="dance"/>Dance</option><br />
<option value="drama"/>Drama</option><br />
<option value="missions"/>Missions</option><br />
<option value="photo1"/>Beginning Photography</option><br />
<option value="photo2"/>Advanced Photography</option><br />
<option value="rock_climbing"/>Rock Climbing</option><br />
<option value="scrap-booking"/>Scrap-Booking</option><br />
<option value="sgjr"/>Summer Games Jr. Training</option><br />
<option value="soccer"/>Soccer</option><br />
<option value="technology"/>Technology</option><br />
<option value="ultimate"/>Ultimate Frisbee</option><br />
<option value="video_games"/>Video Games</option><br />
<option value="volleyball"/>Volleyball</option><br />
<option value="water_park"/>Water Park</option><br />
</select><br /><br />


<label>Second Choice*: </label><select name="satellite2" id="secondchoice" required="required"><br />
<option value="art"/>Art</option><br />
<option value="basketball"/>Basketball</option><br />
<option value="dance"/>Dance</option><br />
<option value="drama"/>Drama</option><br />
<option value="missions"/>Missions</option><br />
<option value="photo1"/>Beginning Photography</option><br />
<option value="photo2"/>Advanced Photography</option><br />
<option value="rock_climbing"/>Rock Climbing</option><br />
<option value="scrap-booking"/>Scrap-Booking</option><br />
<option value="sgjr"/>Summer Games Jr. Training</option><br />
<option value="soccer"/>Soccer</option><br />
<option value="technology"/>Technology</option><br />
<option value="ultimate"/>Ultimate Frisbee</option><br />
<option value="video_games"/>Video Games</option><br />
<option value="volleyball"/>Volleyball</option><br />
<option value="water_park"/>Water Park</option><br />
</select><br /><br />



<label>Third Choice*: </label><select name="satellite3" id="thirdchoice" required="required"><br />
<option value="art"/>Art</option><br />
<option value="basketball"/>Basketball</option><br />
<option value="dance"/>Dance</option><br />
<option value="drama"/>Drama</option><br />
<option value="missions"/>Missions</option><br />
<option value="photo1"/>Beginning Photography</option><br />
<option value="photo2"/>Advanced Photography</option><br />
<option value="rock_climbing"/>Rock Climbing</option><br />
<option value="scrap-booking"/>Scrap-Booking</option><br />
<option value="sgjr"/>Summer Games Jr. Training</option><br />
<option value="soccer"/>Soccer</option><br />
<option value="technology"/>Technology</option><br />
<option value="ultimate"/>Ultimate Frisbee</option><br />
<option value="video_games"/>Video Games</option><br />
<option value="volleyball"/>Volleyball</option><br />
option value="water_park"/>Water Park</option><br />
</select><br /><br />

</div>

How would I go about this? I am assuming I would need to use javascript, but I have no idea where to start.

Answer 1

There’s a lot wrong with your markup.

You can’t have any other elements inside a select, so get rid of the line breaks. Also, option is not self closing, and you can’t do /> AND provide the closing tag.. that makes no sense.

So each line should change from:

<option value="art"/>Art</option><br />

to:

<option value="art">Art</option>

You also have mismatched quotes in the first select:

<select name="satellite1 id="firstchoice" required="required""><br />

Should be

<select name="satellite1" id="firstchoice" required="required">

Run your markup through Markup Validator to catch these things.

---

To clear the other selects based on the first one, you can bind to its onchange event.

<select name="satellite1" id="firstchoice" required="required" onchange="clearOthers()">

Then in clearothers() you set their option’s selectedIndex to a default value:

function clearOthers() {
  document.getElementById("secondchoice").options.selectedIndex=0;
  document.getElementById("thirdchoice").options.selectedIndex=0;
}

I would also add a disabled “Select an option” option to each:

<option value="" disabled>Select</option>

Put it all together and you get something like this demo.

---

To remove specific items from selects based on previous selection, you can use code similar to below:

function clearOthers() {
  var sel1 = document.getElementById("firstchoice");
  var sel2 = document.getElementById("secondchoice");
  var sel3 = document.getElementById("thirdchoice");

  sel2.options.selectedIndex=0;
  sel3.options.selectedIndex=0;

  removeOption(sel2, sel1.value);
  removeOption(sel3, sel1.value);
}

function removeOption (sel, val) {
  // Iterate over select and find matching value
  for (i = 0; i < sel.length; i++) {
    if (sel.options[i].value == val) {
      // remove that index
      sel.remove(i);
      return;
    }
  }
}

Of course, you’ll need some logic to bring those values back once the selection changes to something else.

Demo