如何从 javascript 的下拉列表中删除选项? [英] How do I remove options from a dropdownlist in javascript?

问题描述

是否有任何示例可以让我使用 JavaScript 从下拉列表中删除选项?

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

代码如下:

<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>

这是列表 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> 

现在我想要发生的是，当为第 1 号安全问题选择了任何选项时.对于第 2 号安全问题，该选项不应该存在.

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.

推荐答案

您可以通过将选项设置为 null 来删除它.

You can remove an option by setting it to null.

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

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

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

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.

这篇关于如何从 javascript 的下拉列表中删除选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！