Question

我使用此代码检查在提交之前是否选择了下拉opton。在我的页面上，我有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应该是唯一的，只能使用一次。我建议你给他们所有课程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 2

如果您将监听器放在表单上，它将在函数中this，这样您就可以执行以下操作：

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

您还可以检查所选索引是否大于零。如果它为零或-1，则选择第一个或无选项（反复）。

您应该将ID属性转换为NAME属性，然后您可以重复这些属性（并且在提交表单时它们会成功）。

哦，永远不要将表单控件命名为“submit”，因为它会影响表单的提交方法，因此无法调用它。

Answer 3

因为两个元素的ID都相同，所以选择器使用第一个id匹配这种情况。尝试使用不同的id或USe类而不是ID 或者使用jquery每个函数http://api.jquery.com/each/

Answer 4

当然，您可以在DDL上设置一个操作以确保已设置一个值（之后启用提交按钮），从而将验证的重点直接放在控件本身而不是提交按钮上。（只是另一种剥皮猫的方式！）

提交前检查下拉列表

4 个答案: