jQuery动态选项在选择框中隐藏/显示 [英] Jquery dynamic options hide/show in select box

问题描述

我用SELECT编写了简单的HTML代码，它们具有相同的类形式和相同的选项值

I have following simple Html code with SELECT with the same class forms with identical options values

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

我只想单击一个下拉动态显示，并从一个类的ALL SELECT中隐藏值.

I just want to do click on a dropdown dynamic show and hide value from ALL SELECT with one 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/

Please check the jdfiddle here: https://jsfiddle.net/mhassan94/d6j3fpt2/3/

如果选择一个下拉列表值，则它们将从所有"下拉列表中隐藏，但是如果更改选择下拉列表值，则它们将显示先前的值，并在所有"下拉列表中隐藏新的值.

If a select one dropdown value, they hide from All dropdown but if a change select dropdown value they show previous value and hide the new value in All dropdown.

如何更好地实现?

推荐答案

这是您想要做的吗?

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

如果您需要隐藏在一个特定选择元素中选择的值，请从其余选择元素中填充的所有值中进行尝试，

If you need to hide the value selected in one particular select element,from all the values populated in rest of the select elements try this,

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

这篇关于jQuery动态选项在选择框中隐藏/显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！