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

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

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

 
  1 2 3 4  
  

这是我试图使用的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); }); 

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

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() for remove()

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

  
 
  1 2 3 4  
  

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