jQuery: скрыть элемент, если не выбран параметр выбрать поле (несколько полей)

Для формы поиска я хочу показать кнопку сброса только тогда, когда выбран хотя бы один из четырех доступных вариантов выбора, и скрыть его после того, как все выбранные поля были сброшены. С помощью следующего jQuery я обращаюсь ко всем сразу, что, конечно, прекрасно работает для отображения кнопки, но когда я выбрал опции на более чем одном поле выбора, например, выбрал "цвет" и "размер", кнопка сброса исчезает, как только я очищаю один из двух вариантов выбора.

Как могу ли я позволить jQuery убедиться, что все выбранные были сброшены, чтобы скрыть элемент reset?

Текущий код: 

jQuery('#my_searchform select').change(function() {
    if(jQuery(this).val()) {
        jQuery('.reset').show();
    } else {
        jQuery('.reset').hide();
    }
});
6 2
jquery drop-down-menu show-hide

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-это идентификаторы select. Вы также можете назначить им общий класс и проверить, не выбирают ли они (с классом) для принятия решения.

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

Я бы просто проверил, заполнены ли какие-либо входные данные с помощью фильтра

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

Вот вам и решение 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>
0

Чтобы решить вашу проблему (т. е.: показать кнопку, если какой-либо выбор имеет выбранную опцию, и скрыть, только если все опции выбора были сброшены вручную), вы можете проверить количество выбранных опций, как в следующем фрагменте: 

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

Надеюсь, это поможет - 

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

});
0