如何从 javascript 的下拉列表中删除选项？

How do I remove options from a dropdownlist in javascript?

提问by Amen

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

是否有任何示例可以让我使用 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:

这是清单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 号安全问题选择了任何选项时。该选项不应该用于第 2 号安全问题。

回答by spinon

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/

这是一个工作示例：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.

也不确定您是否使用 jquery，所以我使用普通的旧 javascript。但是应该测试事件注册的兼容性，因为这不适用于所有。