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>

看到它在行动。

也就是说，该解决方案非常脆弱。 在这种情况下 ，它会做您想要的事情 ，但是如果您的关系发生变化，或者代码变得更加复杂等，这不是一个很好的解决方案。没有示例代码，就无法确定您要使用哪些标准来定位选项并删除它们，因此不可能为您带来很多好处。

我建议从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（）的参数将是您的option2。

但是，removeChild（）返回它删除的对象，因此将其存储到另一个变量中，因此，如果用户改变主意，则将已删除的option2作为子对象添加到“ secondary_dropdown”作为子项。

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

如果只想提供快速简单的解决方案，请在选择主下拉菜单中的选项时使用事件侦听器激活，然后相应地删除option2或将其附加。