jQuery：未选择选择字段选项时隐藏元素（多个字段）

Question

对于搜索表单，我只想在选择了四个可用选择中的至少一个选项时显示重置按钮，并在 所有 选择字段被重置后隐藏它。 使用以下 jQuery，我一次解决了所有问题，这当然可以很好地显示按钮，但是当我在多个选择字段上选择了选项时，例如选择了“颜色”和“尺寸”，一旦我清除了两个选择选项之一，重置按钮就会消失。

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

当前代码：

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

Answer 1

希望这会有所帮助-

$(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();
    }
  });

});

Answer 2

为了解决您的问题（即：如果任何选择具有选定的选项，则显示按钮，并且仅当所有选择的选项已手动重置时才隐藏）您可以测试选定选项的数量，如下面的 sn- p：

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

这里有解决方案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 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

你可以试试这个。

$('#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 6

您还需要检查其他选择。

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 是选择 ID。您也可以为它们分配一个公共类并检查这些选择（与类）以供决策。