时间戳

首页 > 解决方案 > Jquery动态选项隐藏/显示在选择框中

javascript - Jquery动态选项隐藏/显示在选择框中

问题描述

我使用具有相同选项值的相同类形式的 SELECT 遵循简单的 Html 代码

<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 中隐藏值。

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/

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

如何更好地实现？

标签： javascriptjqueryselectdrop-down-menushow-hide

解决方案

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

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

推荐阅读