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

50
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> 
 Выполнить код

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

READ ALSO
Пропадает часть блоков

Пропадает часть блоков

При использовании fullpagejs после совершения прокрутки ко второй секции и возвращения к первой - пропадает верхнее меню

28
Как создать пользовательский DataGridColumn wpf

Как создать пользовательский DataGridColumn wpf

Есть выгруженная в таблица базы данных

38
С# + PowerShell скопировать файл

С# + PowerShell скопировать файл

Есть файл, задача стоит перекинуть этот файл на другой компьютер через powershell + C# перекинуть надо частями, по 1кб

40
Как проверить динамически созданные radiobuttons

Как проверить динамически созданные radiobuttons

Пишу клиентскую часть обычных тестов(викторины), где динамически, в зависимости от кол-ва вариантов ответов, создаются radiobuttonВ какой способ...

47