Проверить раскрывающийся список перед отправкой

Question

Я использую этот код, чтобы проверить, выбрано ли раскрывающееся окно opton перед отправкой. На моей странице у меня есть 3 раскрывающихся меню, но только первый работает правильно.

Есть ли способ расширить функцию для 2-го и 3-го выпадающих списков?

Мой сценарий:

<script type="text/javascript"> 
$(document).ready(function(){ 
$("#submit").click(function(){ 
var year = $('#year option:selected').val(); 
if(year == "") 
{ 
$("#msg").html("Please select a year"); 
return false; 
} 
}); 
}); 
</script> 

Мой HTML:

<div id="msg"></div> 
<form method="post" action=""> 
<select id="year"> 
<option value="">OLLA</option> 
<option>1991 </option> 
<option>1992 </option> 
<option>1993 </option> 
<option>1994 </option> 
<option>1995 </option> 
</select> 


<div id="msg"></div> 
<form method="post" action=""> 
<select id="year"> 
<option value="">OLLA</option> 
<option>1991 </option> 
<option>1992 </option> 
<option>1993 </option> 
<option>1994 </option> 
<option>1995 </option> 
</select> 

<input type="submit" name="submit" id="submit"> 
</form> 

Answer 1

Поскольку Идентификаторы обоих элементов одинаковы, так Селектор работает с первым матчем ид этом случае .Try использовать различные идентификаторы или USe вместо ID или использовать jquery для каждой функции http://api.jquery.com/each/

Answer 2

ID's должен быть уникальным и используется только один раз. Я советую вам дать им все классы msg, например,

<div class="msg"></div> 
... 
<div class="msg"></div> 

Кроме того, дать вашим выбирает класс тоже вместо этого, по той же причине, как:

<select class="year"> 

Ваш Jquery также будет изменен на:

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".submit").click(function(){ 
    var year = $('.year option:selected').val(); 
    if(year == "") { 
     $(".msg").html("Please select a year"); 
     return false; 
    } 
    }); 
}); 
</script> 

Answer 3

Если положить слушателя на форме, в функции будет , поэтому вы можете просто сделать что-то вроде:

$("<form selector>").click(function(){ 
    if (this.year.value == "") { 
    $("#msg").html("Please select a year"); 
    return false; 
    } else { 
    $("#msg").html(""); 
    } 
}) 

Вы также можете проверить, больше ли выбранный индекс больше нуля. Если он равен нулю или -1, то выбирается либо первая, либо нет опция (соответственно).

Вы должны повернуть атрибуты идентификатора в атрибуты NAME, затем вы можете повторить их (и они будут успешными при отправке формы).

О, и никогда не называйте элемент управления формой «submit», поскольку он будет теневым способом отправки формы, что делает невозможным его называть.

Answer 4

Вы можете, конечно же, установить действие в DDL, чтобы гарантировать, что значение было задано (после этого включается кнопка отправки), тем самым делая акцент валидации непосредственно на самом элементе управления, а не на кнопке отправки. (Просто другой способ скининга одного и того же кота!)