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