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

隐藏在第1和第2选择列表中选择的第3选择列表的选项

2 个答案: