Question

我想隐藏第二个选择框中的所选选项。我的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打开第二个选择框或vise verse时隐藏第一个选择框中选择的选项。什么是好的做法？

是这样的吗？

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

Answer 1

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

$('.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

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

Answer 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/

Answer 3

您可以.find来自所有select但not当前选择的所有孩子以及filter当前text所有选项，最后隐藏它们。

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

＆＃13;

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();
});

＆＃13;

<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>

＆＃13;

Answer 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>

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

4 个答案: