jQuery on change 仅显示所选选项，remove/disable 其余选项

Question

目标：从 select 下拉菜单中，如果有人 select 有一个选项，disable/remove/hide 那个下拉菜单中的其余选项。

这是下拉菜单。如果某人 select 的“1”，则其余选项 (2,3,4) 将是 removed/disabled/hide:

<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 这里有问题。我哪里做错了？

Answer 1

保持简单并使用：

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

在此上下文中，$(this) 指的是 .selectDropdown，option 元素是 children。

Example Here

..如果你想删除未选择的 children:

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

Example Here

您的代码无法正常工作的原因是 option 元素不是直接 .xyz 元素的 children。您将不得不使用：

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

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

Answer 2

这可以简化事情。由于 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>

Answer 3

你把它复杂化了。用户单击 select 框后，您就在 select 中，因此无需转到 .abc 和 .xyz。

这里有一个 fiddle 来展示它的实际运作： http://jsfiddle.net/releaf/ng50zmyo/

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

Answer 4

你刚刚select错了节点。 $(this).closest('.abc').children('.xyz') --> 这个节点的子节点指向 select，没有子节点 option.

给你：

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

JSFiddle

jQuery on change 仅显示所选选项，remove/disable 其余选项

jQuery on change only shows the selected option, remove/disable rest of them

html

javascript

jquery

select

onchange