How do I remove options from a dropdownlist in javascript?

问题

Are there any examples out there that will allow me to remove options from drop down list using JavaScript?

Here is the code:

<select autocomplete="off" id="sSec1" tabindex="0" name="sSec1" class="isSelected styled security selectOriginal">
      <option id="" value="">Select</option>
      <option id="o1" value="What is the name of your first pet?">What is the name of your first pet?</option>
      <option id="o2" value="What is your favorite food?">What is your favorite food?</option>
      <option id="o3" value="What is your favorite holiday?">What is your favorite holiday?</option>
      <option id="o4" value="What is your favorite movie?">What is your favorite movie?</option>
      <option id="o5" value="What is your favorite sport?">What is your favorite sport?</option>
      <option id="o6" value="In what city were you born?">In what city were you born?</option>
      <option id="o7" value="What is your mother's maiden name?">What is your mother's maiden name?</option>
    </select>

Here is list 2:

<select autocomplete="off" id="sSec2" tabindex="0" name="sSec2" class="isSelected security styled">    
      <option id="" value="">Select Second Question</option>
      <option id="o1s2" value="What is the name of your first pet?">What is the name of your first pet?</option>
      <option id="o2s2" value="What is your favorite food?">What is your favorite food?</option>
      <option id="o3s2" value="What is your favorite holiday?">What is your favorite holiday?</option>
      <option id="o4s2" value="What is your favorite movie?">What is your favorite movie?</option>
      <option id="o5s2" value="What is your favorite sport?">What is your favorite sport?</option>
      <option id="o6s2" value="In what city were you born?">In what city were you born?</option>
      <option id="o7s2" value="What is your mother's maiden name?">What is your mother's maiden name?</option>
    </select>

Now what I want to happen is when any option is selected for security question number 1. That option should not be there for security question number 2.

回答1:

You can remove an option by setting it to null.

document.getElementById("sSec1").options[0] = null;

EDIT:

Here is a working example: http://jsfiddle.net/c5wFn/

document.getElementById("sSec1").addEventListener("change", 
    function(select)
    {
        if (this.value != "")
        {
            var select2 = document.getElementById("sSec2");
            for (var i = 0; i < select2.options.length; i++)
            {
                if (this.value == select2.options[i].value)
                {
                    select2.options[i] = null;
                    break;
                }
            }
        }
    }, false);

The one thing that you will need to work in though is that when an option is changed you need to probably go back through the first list items and add all the non selected items to the list so you put back the question that was removed with the previous selection. It shouldn't be hard I just didn't want to work up all the details.

Also not sure if you are using jquery or not so I worked up with plain old javascript. But the event registration should be tested for compatibility as this won't work on all.

来源：https://stackoverflow.com/questions/4571602/how-do-i-remove-options-from-a-dropdownlist-in-javascript

标签

javascript

select

combobox