javascript - 提交前检查下拉列表

Question

我使用此代码检查是否在提交之前选择了下拉选项。 在我的页面上，我有 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

ID's应该是唯一的并且只使用一次。我建议你给他们所有的类(class) 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>