jQuery在下一个选择框中隐藏选定的选项答案

【问题标题】：jQuery hide selected option in next select boxjQuery在下一个选择框中隐藏选定的选项
【发布时间】：2015-04-24 18:42:24
【问题描述】：

我想在第二个选择框中隐藏第一个选择框中的选定选项。我的 HTML。

<div>
<select class="fields-mapping">
    <option>Option1</option>
    <option>Option2</option>
    <option>Option3</option>
</select>
<select class="fields-mapping">
    <option>Option1</option>
    <option>Option2</option>
    <option>Option3</option>
</select>

我希望在使用 jQuery 打开第二个选择框或虎钳时隐藏第一个选择框中选择的选项。什么是好的做法？

是这样的吗？

$('.fields-mapping').select(function () {
   $('option:selected', this).hide(); });

【问题讨论】：

隐藏选项？？你应该隐藏整个选择元素本身
我想要隐藏/删除选项。就像在第二个选择框中的第一个选择框中选择了 option2 一样，不应该有 option2。选择框中的所有选项都相同。

标签： javascript jquery html select

【解决方案1】：

您可以使用filter() 函数查找其他select 元素中具有匹配值的所有option 元素，并将其隐藏。试试这个：

$('.fields-mapping').change(function() {
    var value = $(this).val();
    var $otherOptions = $('.fields-mapping').not(this).find('option').show();
    $otherOptions.filter(function() {
        return $(this).text() == value;
    }).hide();
});

Example fiddle

请注意，这将适用于任意数量的选择，无需任何更改（只要这些 select 元素中有足够的 option 元素可以从每个选择中做出一个选择）。

【讨论】：

只是好奇如果我们使用 select2 插件是如何实现的？有什么想法吗？

【解决方案2】：

另一种解决方案是使用 :contains 和 :not(:selected) 选择器。这将使您能够从另一个选择框中找到选定的选项。

$(".fields-mapping").change(function() {            
    var selectedOption = $('option:selected', this).text(); 
    $(".fields-mapping option:contains('" + selectedOption + "'):not(:selected)").hide();
});

JSFiddle：https://jsfiddle.net/28frmszv/1/

【讨论】：

只是好奇如果我们使用 select2 插件是如何实现的？有什么想法吗？
这比我想象的要难。我无法通过仅使用 .hide() 方法来隐藏它，因为 select2 在单击框时会重置生成的 li 元素的样式。我所做的让它隐藏的是我使用 disabled 属性并使用 CSS 来隐藏具有属性 [aria-disabled=true] 的 li 元素。这是小提琴：jsfiddle.net/28frmszv/2

【解决方案3】：

你可以.find all children from all select but not current select and to filter all options by current text 最后你隐藏它们。

$fieldMapping.not($this)
             .find('option')
             .filter(function () { 
                 return $(this).text() == text; 
             }).hide();

var $fieldMapping = $('.fields-mapping');
$fieldMapping.change(function() {
  var $this = $(this);
  var text = $this.find('option:selected').text();
  $fieldMapping.not($this)
               .find('option')
               .filter(function () { 
                   return $(this).text() == text; 
                }).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="fields-mapping">
    <option>Option1</option>
    <option>Option2</option>
    <option>Option3</option>
</select>
<select class="fields-mapping">
    <option>Option1</option>
    <option>Option2</option>
    <option>Option3</option>
</select>

【讨论】：

【解决方案4】：

更改第一个框以隐藏第二个框中的选项试试下面的代码：

<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
first box
<select id="first" class="fields-mapping">
    <option value="Option1">Option1</option>
    <option value="Option2">Option2</option>
    <option value="Option3">Option3</option>
</select>
second box
<select id="second" class="fields-mapping">
    <option value="Option1">Option1</option>
    <option value="Option2">Option2</option>
    <option value="Option3">Option3</option>
</select>
  <script type="text/javascript">
  $('.fields-mapping').change(function () {
       var currentId = $(this).attr('id');
       var currentSelectItem = $(this).val();
       if(currentId =='first'){
       $("#second option").css("display","block");
       $("#second option[value=" + currentSelectItem + "]").css("display","none");
       }
   });
</script>

</body>
</html>

【讨论】：