Javascript：根据另一个下拉列表从下拉列表中删除不同的选项标签？

Question

是的，标题是一团糟。

这就是我想要做的： 我有一个主要的下拉列表，我可以在其中进行选择，比如说，两个选项。选项 1 和选项 2。如果选择了 Option1，我不希望发生任何事情。如果选择了 Option2，我想从另一个下拉列表中删除一个选项标签。

<select name="main_dropdown">
    <option value="Option1">Option 1</option>
    <option value="Option2">Option 2</option>
</select>

<select name="secondary_dropdown">
    <option value="Option1">Option 1</option>
    <option value="Option2">Option 2</option> // Let's say i want to remove this option tag if Option2 in main_dropdown is selected.
    <option value="Option2">Option 2</option>
</select>

谢谢！

Answer 1

我认为，如果您的问题包括展示您自己尝试寻找答案的代码，而不是要求其他人编写您需要的代码，您会得到更好的回应和更多的关注。不仅仅是因为人们不想让他们觉得自己在做免费工作，而且回答起来也变得更加困难。

例如，即使您尝试做的是非常基本的 javascript，也有许多不同的方法可以解决它。这是您问题的快速有效答案（使用 jQuery）：

<script>
  $(document).ready(function(){
    $('select[name=main_dropdown]').bind('change',function(){
      if($(this).val() == 'Option2') $('select[name=secondary_dropdown] option[value=Option2]').remove();
    });   
  });
</script>

<select name="main_dropdown">
    <option value="Option1">Option 1</option>
    <option value="Option2">Option 2</option>
</select>

<select name="secondary_dropdown">
    <option value="Option1">Option 1</option>
    <option value="Option2">Option 2</option> // Let's say i want to remove this option tag if Option2 in main_dropdown is selected.
    <option value="Option2">Option 2</option>
</select>

See it in action.

也就是说，这个解决方案非常脆弱。 在这种情况下，它会做你想做的事，但如果你的关系发生变化，或者代码变得更复杂等，它就不是一个很好的解决方案。没有示例代码，就不可能告诉你什么标准' 用于定位选项并将其删除，因此不可能对您有多大好处。

我建议从 jQuery 库开始，它有一些很棒的 Tutorials。如果您试一试，您应该能够很快自己解决此类问题。如果您的代码最终无法运行并且您不知道该去哪里，请不要担心——我相信这里的人们会很乐意帮助您。

Answer 2

<option value="Option2" id="ToBeOrNotToBe">Option 2</option>

如果 'main_dropdown' 的值为 "Option2"（进行比较），请使用 .removeChild() 从 "secondary_dropdown" 中删除 document.getElementById("ToBeOrNotToBe") 。我建议为您的所有选择提供一个唯一的 ID 和名称，以便您可以使用 document.getElementById() 来获取您的元素，然后使用 .removeChild() 操作所有内容。您将传递给 removeChild() 的参数将是您的选项 2。

但是，removeChild() 返回它删除的对象，所以将它存储到另一个变量中，所以如果用户改变了主下拉菜单的想法，appendChild() 将删除的 option2 作为子项返回到“secondary_dropdown”。

另外，在我看来，首先构建主下拉列表，一旦他们选择了一个值，然后使用 appendChild() 将第二个下拉列表构建到文档本身中。如果您查看，http://www.w3schools.com/tags/tag_option.asp 显示了您可以附加到选项的事件侦听器，因此一旦选择了选项，请在第一个下拉列表下方插入第二个下拉列表，并相应地构建它。

如果您只想要一个快速简单的解决方案，请使用事件侦听器在主下拉列表中的选项被选中时激活，然后相应地删除选项 2 或附加它。