jQuery：当没有选择 select 字段选项时隐藏元素（多个字段）

Question

对于搜索表单，我只想在选择了四个可用 select 中的至少一个选项时显示重置按钮，然后将其隐藏一次 all select 字段已重置。使用以下 jQuery 我一次解决所有问题，这当然可以很好地显示按钮，但是当我在多个 select 字段上选择选项时，例如选择 'colour' 和 'size'，当我清除两个 select 选项之一后，重置按钮就会消失。

如何让 jQuery 确保所有 select 已被重置以隐藏重置元素？

当前代码：

jQuery('#my_searchform select').change(function() {
    if(jQuery(this).val()) {
        jQuery('.reset').show();
    } else {
        jQuery('.reset').hide();
    }
});

Answer 1

给你解决方案https://jsfiddle.net/ngqrw1cz/2/

$('#my_searchform select').change(function() {
  var flag = false;
    $('select').each(function(){
     if($(this).val() != ""){
       flag = true
      }
    });

    if(flag){
     $('.reset').show();
    }else{
     $('.reset').hide();
    }
});

.reset {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my_searchform">
  <select>
    <option value="">Select one option</option>
    <option value="test1">Test 1</option>
    <option value="test2">Test 2</option>
  </select>
  <select>
    <option value="">Select one option</option>
    <option value="test3">Test 3</option>
    <option value="test4">Test 4</option>
  </select>
  <select>
    <option value="">Select one option</option>
    <option value="test5">Test 5</option>
    <option value="test6">Test 6</option>
    <option value="test9">Test 9</option>
  </select>
</form>


<button type="sbumit" class="reset">Reset</button>

Answer 2

您还需要检查其他 select。

jQuery('#my_searchform select').change(function() {
    if(!($("#select1").val()||$("#select2").val()||$("#select3").val()||$("#select4").val())){
        jQuery('.reset').hide();
    }else{
        jQuery('.reset').show();
    }});

select1、select2、select3、select4 是 select ID。您也可以为它们分配一个共同的 class，并检查那些 select（带有 class）以供决策。

Answer 3

你可以试试这个。

$('#my_searchform select').change(function() {
    var isAnySelected=false;
    $('#my_searchform select').each(function(){
      if($(this).val()!=""){
        isAnySelected=true;        
      }
    });

    if(isAnySelected) {
        $('.reset').show();
    } else {
        $('.reset').hide();
    }
});

$(".reset").click(function(){
  $('#my_searchform select').each(function(){
      $(this).val("");
  });
  $('.reset').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my_searchform">
  <input type="button" value="Reset Form" class="reset" style="display:none;" />
  <br/><br/>

  <label>Select1</label>
  <select>
    <option value=""> </option>
    <option value="1">1</option>
  </select>
  <br/>
   <label>Select2</label>
  <select>
    <option value=""> </option>
    <option value="1">1</option>
  </select>
  <br/>
   <label>Select3</label>
  <select>
    <option value=""> </option>
    <option value="1">1</option>
  </select>
</form>

Answer 4

我只想检查是否使用过滤器填写了任何输入

    jQuery('#my_searchform select').change(function() {
        if(jQuery(this).val()) {
            jQuery('.reset').show();
        } else {
            if(jQuery('#my_searchform select').filter(function(){return !this.value}).length === 0) {
jQuery('.reset').hide();
}
        }
        });

Answer 5

为了解决您的问题（即：如果任何 select 具有 selected 选项，则显示按钮，仅当所有 selects 的选项都已手动设置时才隐藏重置）您可以测试 selected 选项的数量，如以下代码段所示：

$('select').on('change', function(e) {
    $('.reset').toggle($('select option[value!=""]:selected').length > 0);
});

$('button.reset').on('click', function(e) {
    // on reset action reset and trigger the change event
    $('select').val('').trigger('change');
});

.reset {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form>
    Select a colour:
    <select>
        <option value=""></option>
        <option value="red">red</option>
        <option value="yellow">yellow</option>
        <option value="black">black</option>
        <option value="white">white</option>
    </select>

    Select a size:
    <select>
        <option value=""></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <br>
    <button type="reset" class="reset" value="Reset">Reset</button>
</form>

Answer 6

希望这对您有所帮助-

$(document).ready(function() {
  var resetBtn = $("#resetBtn");
  resetBtn.hide();

  function validateSelects(){
    var isSelected = false;
    $.each($("select"),function()
    {
         if( $(this).val() !== ""){  isSelected=true; console.log(isSelected);}
    });
    return(isSelected);
  }

  // For the functionality.
  $("#myform select").on("change",function(){
    if(validateSelects()) {
      console.log("if " + validateSelects());
      resetBtn.show();
    }else {
      console.log("else " + validateSelects());

      resetBtn.hide();
    }
  });

});

jQuery：当没有选择 select 字段选项时隐藏元素（多个字段）

jQuery: Hide element when no select field option has been chosen (multiple fields)

jquery

show-hide

drop-down-menu