jQuery on change 仅显示所选选项，删除/禁用其余选项答案

【问题标题】：jQuery on change only shows the selected option, remove/disable rest of themjQuery on change 仅显示所选选项，删除/禁用其余选项
【发布时间】：2015-03-25 13:16:49
【问题描述】：

目标：从选择下拉菜单中，如果有人选择了一个选项，则禁用/删除/隐藏该下拉菜单上的其余选项。

这是下拉菜单。如果有人选择“1”，其余选项（2、3、4）将被删除/禁用/隐藏：

<div class="abc">
  <div class="xyz">
    <select name="pqr" class="selectDropdown">
      <option value='1'>1</option>
      <option value='2'>2</option>
      <option value='3'>3</option>
      <option value='4'>4</option>
    </select>
  </div>
</div>

这是我尝试使用的 JavaScript：

$('.selectDropdown').on('change', function(e) {
    $(this).closest('.abc').children('.xyz').children('option:not(:selected)').prop('disabled', true);
});

我知道，这里的 JavaScript 有问题。我在哪里做错了？

【问题讨论】：

@jaspher 感谢您的语法建议。以及所有回复的人，感谢您的快速回复。

标签： javascript jquery html select onchange

【解决方案1】：

这简化了事情。由于this 是select，因此无需遍历 2 个级别并返回到您重新开始的位置

$('.selectDropdown').on('change', function(e) {
    $(this).children(':not(:selected)').prop('disabled', true);
});

如果首选删除，则将prop() 换成remove()

$('.selectDropdown').on('change', function(e) {
    $(this).children(':not(:selected)').prop('disabled', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="abc">
  <div class="xyz">
    <select name="pqr" class="selectDropdown">
      <option value='1'>1</option>
      <option value='2'>2</option>
      <option value='3'>3</option>
      <option value='4'>4</option>
    </select>
  </div>
</div>

【讨论】：

【解决方案2】：

您只是选择了错误的节点。 $(this).closest('.abc').children('.xyz') --> 这个节点的子节点指向select，它没有子节点option。

给你：

$('.selectDropdown').on('change', function(e) {
    $('select[name="pqr"]').children('option:not(:selected)').prop('disabled', true);
});

JSFiddle

【讨论】：

为什么要更改选择器？当您针对完全相同的元素时，这似乎令人困惑
同意。当 $(this) 已经在上下文中时，没有理由在这里再次查询 DOM。
我只想说明正确的选择器。 @crazymoin 选择了错误的节点，因为他向上移动到 '.abc' 然后向下移动。与其解决“示例”，不如指出正确的选择器？
但假设一个页面中有 10 个此类。内部选择器甚至可能不是正确的选择器，而 this 将始终是事件发生的元素，并且更具可读性

【解决方案3】：

你把事情复杂化了。用户单击选择框后，您就位于该选择器中，因此无需转到 .abc 和 .xyz。

这里有一个小提琴来展示它的工作原理： http://jsfiddle.net/releaf/ng50zmyo/

$('.selectDropdown').on('change', function(e) {
 $(this).find('option:not(:selected)').prop('disabled', true);
});

【讨论】：

【解决方案4】：

保持简单并使用：

$('.selectDropdown').on('change', function(e) {
    $(this).children('option:not(:selected)').prop('disabled', true);
});

在这种情况下，$(this) 指的是.selectDropdown，option 元素是子元素。

Example Here

..如果你想删除未选中的孩子：

$('.selectDropdown').on('change', function(e) {
    $(this).children('option:not(:selected)').remove();
});

Example Here

您的代码不起作用的原因是option 元素不是.xyz 元素的直接子元素。您将不得不使用：

$('.selectDropdown').on('change', function(e) {
    $(this).closest('.abc').children('.xyz').children().children('option:not(:selected)').prop('disabled', true);
});

（我只是在.children('.xyz')..之后链接了另一个.children()方法）

【讨论】：