Question

  $(function () {
      $('.selectpicker').selectpicker();
  });

    $(document).ready(function(){
            $("select").change(function(){
                $(this).find("option:selected").each(function(){
                    var optionValue = $(this).attr("value");
                    if(optionValue){
                        $(".row").not("." + optionValue).hide();
                        $("." + optionValue).show();
                    } else{
                        $(".row").hide();
                    }
                });
            }).change();
        });

   

    .bootstrap-select .bs-ok-default::after {
        width: 0.3em;
        height: 0.6em;
        border-width: 0 0.1em 0.1em 0;
        transform: rotate(45deg) translateY(0.5rem);
    }

    .btn.dropdown-toggle:focus {
        outline: none !important;
    }

   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
 
 <div class="container py-5">
     
     
      
      <div class="criteria rows">
          <div class="criteria col-lg-6 mx-auto">
              <label class="criteria text-white mb-3 lead">Select Criteria</label>
              <!-- Multiselect dropdown -->
              <select multiple data-style="bg-white rounded-pill px-4 py-3 shadow-sm " class="criteria selectpicker w-100">
                
                              <option value="quarterly">Quarter</option>
                              <option value="half_yearly">Month</option>
                              <option value="yearly">Year</option>
              </select><!-- End -->
          </div>
      </div>


      <div class="quarterly row">
          <div class="quarterly col-lg-6 mx-auto">
              <label class="quarter text-white mb-3 lead">Select Quarter</label>
              <!-- Multiselect dropdown -->
              <select multiple data-style="bg-white rounded-pill px-4 py-3 shadow-sm " class="quarter selectpicker w-100">
                  
                                <option value="1">Quarter 1</option>
                                <option value="2">Quarter 2</option>
                                <option value="3">Quarter 3</option>
                                <option value="4">Quarter 4</option>
              </select><!-- End -->
          </div>
      </div>


      <div class="half_yearly row">
          <div class="half_yearly col-lg-6 mx-auto">
              <label class="half_yearly text-white mb-3 lead">Select Month</label>
              <!-- Multiselect dropdown -->
              <select multiple data-style="bg-white rounded-pill px-4 py-3 shadow-sm " class="half_yearly selectpicker w-100">
                 
                               <option value="1">6 month</option>
                               <option value="2">year</option>
              </select><!-- End -->
          </div>
      </div>


      <div class="yearly row">
          <div class="yearly col-lg-6 mx-auto">
              <label class="yearly text-white mb-3 lead">Select Year</label>
              <!-- Multiselect dropdown -->
              <select multiple data-style="bg-white rounded-pill px-4 py-3 shadow-sm " class="yearly selectpicker w-100">
                 
                                <option value="2021">2021-2022</option>
                                
              </select><!-- End -->
          </div>
      </div>
      
  </div>

所以我只想显示 Select Criteria 下拉列表，当值被选中时，给定的下拉列表应该显示，这是有效的，但首先所有 4 个下拉列表都显示我不想要的，以及当一个值在任一 Quartely-row, half-yearly-row or yearly-row 中单击，下拉菜单会自动隐藏，如代码段所示，我尝试了各种解决方案，但都没有奏效。请如果有人能帮我。

谢谢。

Answer 1

用这个代码试试：

$(document).ready(function(){

    var criterias = [
        'quarterly',
        'half_yearly',
        'yearly'
    ];

    criterias.forEach(function(criteria) {
        $("." + criteria).hide();
    });

    $('.criteria').on('changed.bs.select', function (e, clickedIndex, isSelected) {
        if (isSelected) {
            $("." + criterias[clickedIndex]).show();
        } else {
            $("." + criterias[clickedIndex]).hide();
        }
    });
});

如何隐藏和显示下拉菜单？

1 个答案: