Question

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

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

当前代码：

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

Answer 1

您还需要检查其他选项。

SELECT DeviceIP
  ,ServiceStatus
  ,ReportedErrors
  ,Max(SwVersion) as MaxSwVersion
FROM PollingStatus p
      INNER JOIN DeviceProperties d
            ON p.DeviceIP = d.DeviceIP
GROUP BY DeviceIP, ServiceStatus, ReportedErrors

select1，select2，select3，select4是选择ID。您也可以为它们分配一个公共类，并检查这些选择（带有类）以供决策。

Answer 2

你可以试试这个。

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

您可以使用解决方案https://jsfiddle.net/ngqrw1cz/2/

＆＃13;

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

＆＃13;

.reset {
  display: none;
}

＆＃13;

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

＆＃13;

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').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：当没有选择选择字段选项时隐藏元素（多个字段）

6 个答案: