如何从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/

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.

也不确定您是否在使用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屋！