Jquery select 框中的动态选项 hide/show

Question

我有以下简单的 Html 代码，其中 SELECT 具有相同的 class 形式和相同的选项值

<select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>

<select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>

我只想点击一个下拉动态显示和隐藏所有 SELECT 的值，其中一个 class。

jQuery.each($("select.gr-fields-select"), function(){            
$(".gr-fields-select").change(function() {
if($(".gr-fields-select").val() != "") {
$(".gr-fields-select option[value!="+$(".gr-fields-select").val()+"]").show();
$(".gr-fields-select option[value="+$(".gr-fields-select").val()+"]").hide();
} else {
$(".gr-fields-select option[value!="+$(".gr-fields-select").val()+"]").show();
}
});
})

请在此处检查 jdfiddle： https://jsfiddle.net/mhassan94/d6j3fpt2/3/

如果 select 一个下拉值，它们会隐藏在所有下拉列表中，但如果更改 select 下拉值，它们会显示以前的值并在所有下拉列表中隐藏新值。

如何更好地实现？

Answer 1

这是你想做的吗？

$(".gr-fields-select").change(function(){
  var selectedValue = $(this).val();
  $(".gr-fields-select").each(function(ind, item){
     if($(item).find(':selected').value!=selectedValue){
     $(item).find('option').each(function(index,option){
        if(option.value!=selectedValue){
          $(option).show();
        }else{
          $(option).hide();
        }
      });
    }  
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>First</label><select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>

<br>
<label>Second</label><select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>

<br>

如果您需要在一个特定的 select 元素中隐藏 selected 值，从其余 select 元素中填充的所有值试试这个，

$(".gr-fields-select").change(function(){
 
  var selectedValue = $(this).val();
  var previousValue = $(this).data("new");
  if(previousValue!=undefined){
   $(this).data("old",previousValue);
  }
  $(this).data("new",selectedValue);
  $(".gr-fields-select").each(function(ind, item){
     if($(item).find(':selected').value!=selectedValue){
     $(item).find('option').each(function(index,option){
        if(option.value==selectedValue){
           $(option).hide();
        }
        if(option.value==previousValue){
           $(option).show();
        }
      });
    }  
  }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>


<select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>

<select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>

Answer 2

所以在不要重新发明轮子类别中。我在想 select 之类的多 select2 可能比多个下拉列表更容易完成您想要的。 select 2 如果您只想要两个，甚至可以让您限制 select 离子长度。我认为有多个下拉菜单需要跟踪。特别是如果你想要两个以上的下拉菜单。如果他们选择了乱序的 select 怎么办？运行下面的代码片段可以看到使用 multiselect

的可能实现

$(document).ready(
    function () {
        $("#multipleSelectExample").select2({
          maximumSelectionLength: 2,
          closeOnSelect: false,
          allowClear: true
        });
    }
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.full.min.js">
</script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.min.css">

<select id="multipleSelectExample" data-placeholder="Select" multiple>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>

Jquery select 框中的动态选项 hide/show

Jquery dynamic options hide/show in select box

javascript

jquery

select

show-hide

drop-down-menu