jQuery的变化上只显示所选择的选项，删除/禁用休息(jQuery on change only

目标：从选择下拉菜单中，如果有人选择的选项，禁用/删除/隐藏的是下拉菜单中的选项的其余部分。

这里是下拉菜单。 如果有人选择了“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是错误的在这里。 我在哪里犯这样的错误？

Answer 1:

保持简单和使用：

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

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

例如这里

---

..和如果要删除未选中的孩子：

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

例如这里

---

你的代码是不工作的原因是因为该option元素不是直接孩子.xyz元素。 你将不得不使用：

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

（I简单链接另一个.children()后方法.children('.xyz') ..）

Answer 2:

你在复杂的。 一旦用户点击了选择框，你这个选择里，所以没有必要去达到和名为.abc名为.xyz。

这里有一个小提琴，显示它在行动工作： http://jsfiddle.net/releaf/ng50zmyo/

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

Answer 3:

这简化了的东西。 由于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 4:

您只需选择错误的节点。 $(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 only shows the selected option, remove/disable rest of them