隐藏在第一和第二选择列表中选择的第三选择列表的选项

Question

我有3个选择列表，其中第1个用于x轴，第2个用于y轴，并且在所有3个选择列表中都有通用选项。我想隐藏第1个和第2个选择的第3个选择列表的选项，并显示每次更改第一个和第二个选择列表并显示最后一个隐藏选项。

请有人帮我

          <div class="col-md-6 col-sm-6  form-group DropDown1">
                <select class="form-control DropDown" name="DropDown1" id="DropDown1">
                    <option value="">Select Options to Search</option>
                    <option value="11">11</option>
                    <option value="22">22</option>
                    <option value="33">33</option>
                    <option value="44">44</option>
                </select>
            </div>
            <div class="col-md-6 col-sm-6  form-group DropDown2">
                <select class="form-control DropDown" name="DropDown2" id="DropDown2">
                    <option value="">Select Options to Search</option>
                    <option value="11">11</option>
                    <option value="22">22</option>
                    <option value="33">33</option>
                    <option value="44">44</option>
                </select>
            </div>


            <div class="col-md-12 col-sm-12">
                <legend>Advanced Search Options</legend>
            </div>
            <div class="col-md-4 col-sm-4  form-group DropDown3">
                <select class="form-control DropDowns" name="DropDown3" id="DropDown3">
                    <option value="">Select Options to Search</option>
                    <option id="DropDown_opt11" value="opt11">11</option>
                    <option id="DropDown_opt22" value="opt22">22</option>
                    <option id="DropDown_opt33" value="opt33">33</option>
                    <option id="DropDown_opt44" value="opt44">44</option>
                    <option id="DropDown_opt55" value="opt55">55</option>
                </select>
            </div>

我正在用这个jquery隐藏，但是当我重新选择第一个或第二个选择列表选项时，最后一个隐藏选项未显示，这会阻碍选项

            var drop2;
            var drop1;
            $(document).ready(function(){

                $('.DropDown1').on('change',"#DropDown1",function(){
                    drop1  = $("#DropDown1 option:selected").val();
                });

                $('.DropDown2').on('change',"#DropDown2",function(){
                    drop2  = $("#DropDown2 option:selected").val();

                });
            });

            $('.DropDown3').click(function(){
                var selector2 = 'DropDown_opt'+drop1;
                var selector3 = 'DropDown_opt'+drop2;
                    $("#"+selector2).hide(selector2);
                    $("#"+selector3).hide(selector3);
            });

Answer 1

您需要取消隐藏隐藏的选项。 我添加了一个功能来取消隐藏先前隐藏的选项。

检查小提琴https://jsfiddle.net/he4wq196/1/

function unhideOptions() {
    $('#DropDown3 > option').each(function(){
        $(this).show();
    });
} 

Answer 2

使用.prop("disabled",true)禁用该option或使用.prop("disabled",true) .hide()将其隐藏。

我也整理了一下你的代码

var drop1, drop2;
$(document).ready(function() {

  $(document).on('change', "#DropDown1,#DropDown2", function() {
    var d = $(this).attr("id").replace("DropDown","drop");
    window[d] = 'DropDown_opt' + $(this).find("option:selected").val();
    hideoptions()
  });
});

function hideoptions() {
  $("#DropDown3 option").prop("disabled", false);
  $("#DropDown3 #" + drop1).prop("disabled", true);
  $("#DropDown3 #" + drop2).prop("disabled", true);
};

 var drop1, drop2; $(document).ready(function() { $(document).on('change', "#DropDown1,#DropDown2", function() { var d = $(this).attr("id").replace("DropDown","drop"); window[d] = 'DropDown_opt' + $(this).find("option:selected").val(); hideoptions() }); }); function hideoptions() { $("#DropDown3 option").prop("disabled", false); $("#DropDown3 #" + drop1).prop("disabled", true); $("#DropDown3 #" + drop2).prop("disabled", true); }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-6 col-sm-6 form-group DropDown1"> <select class="form-control DropDown" name="DropDown1" id="DropDown1"> <option value="">Select Options to Search</option> <option value="11">11</option> <option value="22">22</option> <option value="33">33</option> <option value="44">44</option> </select> </div> <div class="col-md-6 col-sm-6 form-group DropDown2"> <select class="form-control DropDown" name="DropDown2" id="DropDown2"> <option value="">Select Options to Search</option> <option value="11">11</option> <option value="22">22</option> <option value="33">33</option> <option value="44">44</option> </select> </div> <div class="col-md-12 col-sm-12"> <legend>Advanced Search Options</legend> </div> <div class="col-md-4 col-sm-4 form-group DropDown3"> <select class="form-control DropDowns" name="DropDown3" id="DropDown3"> <option value="">Select Options to Search</option> <option id="DropDown_opt11" value="opt11">11</option> <option id="DropDown_opt22" value="opt22">22</option> <option id="DropDown_opt33" value="opt33">33</option> <option id="DropDown_opt44" value="opt44">44</option> <option id="DropDown_opt55" value="opt55">55</option> </select> </div>