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

Question

是否有任何示例可以让我使用 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 号安全问题，该选项不应该出现。

Answer 1

您可以通过将选项设置为 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);

您会做的一件事但需要解决的是，当选项更改时，您可能需要返回第一个列表项并将所有未选定的项目添加到列表中，以便放回先前选择中删除的问题。这应该不难，我只是不想处理所有细节。

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