Всплывающий текст с помощью jQuery при select value='0'

266

09 августа 2018, 21:40

Есть список и кнопка. Как можно сделать при помощи jQuery так, чтобы появлялось всплывающее предупреждение <p id="warn">Warning</p>, когда мы кликаем на кнопку, при хоть одном select со значением value='0' ?

#warn { 
  display: none; 
}

<select id="length" name="length"> 
  <option value="0" selected="" disabled="">Choose</option> 
  <option value="1">One</option> 
  <option value="2">Two</option> 
  <option value="3">Three</option> 
</select> 
 
<select id="weight" name="weight"> 
  <option value="0" selected="" disabled="">Choose</option> 
  <option value="1">One</option> 
  <option value="2">Two</option> 
  <option value="3">Three</option> 
</select> 
 
<select id="height" name="height"> 
  <option value="0" selected="" disabled="">Choose</option> 
  <option value="1">One</option> 
  <option value="2">Two</option> 
  <option value="3">Three</option> 
</select> 
 
<p id="warn">Warning</p> 
 
<button id="button">Result</button>

Answer 1

var selectLength = $("#length"); 
var selectWeight = $("#weight"); 
var selectHeight = $("#height"); 
var warn = $("#warn"); 
$("#button").on("click", function() { 
  if(!!!selectLength.val() || !!!selectWeight.val() || !!!selectHeight.val() ) { 
    warn.css("display", "inline-block"); 
  } else { 
    warn.css("display", "none"); 
  } 
});

#warn { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<select id="length" name="length"> 
  <option value="0" selected="" disabled="">Choose</option> 
  <option value="1">One</option> 
  <option value="2">Two</option> 
  <option value="3">Three</option> 
</select> 
 
<select id="weight" name="weight"> 
  <option value="0" selected="" disabled="">Choose</option> 
  <option value="1">One</option> 
  <option value="2">Two</option> 
  <option value="3">Three</option> 
</select> 
 
<select id="height" name="height"> 
  <option value="0" selected="" disabled="">Choose</option> 
  <option value="1">One</option> 
  <option value="2">Two</option> 
  <option value="3">Three</option> 
</select> 
 
<p id="warn">Warning</p> 
 
<button id="button">Result</button>

Answer 2

Для селектов лучше присвоить один класс - так выборка проще

var $select = $('select'); 
$select.on('change', function(e){ 
  var $this = $(this); 
    $this.val() && $this.removeClass('select_error')  
}) 
$('#button').on('click', function(e){ 
  $select.each(function(i, el) { 
    var $this = $(el); 
    !$this.val() && $this.addClass('select_error')  
  }) 
})

#warn { 
  display: none; 
} 
.select_error { 
  border-color: red 
} 
.select_error ~ #warn { 
  display: block; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<select id="length" name="length"> 
  <option value="0" selected="" disabled="">Choose</option> 
  <option value="1">One</option> 
  <option value="2">Two</option> 
  <option value="3">Three</option> 
</select> 
<select id="weight" name="weight"> 
  <option value="0" selected="" disabled="">Choose</option> 
  <option value="1">One</option> 
  <option value="2">Two</option> 
  <option value="3">Three</option> 
</select> 
 
<select id="height" name="height"> 
  <option value="0" selected="" disabled="">Choose</option> 
  <option value="1">One</option> 
  <option value="2">Two</option> 
  <option value="3">Three</option> 
</select> 
 
<p id="warn">Warning</p> 
 
<button id="button">Result</button> 
 Выполнить код

Также при ошибки можно давать один общий класс. Зависит от структуры кода