1

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

4 回答 4

3

ID应该是唯一的并且只使用一次。我建议你改为给他们所有课程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>
于 2013-03-20T22:37:28.910 回答
1

如果您将侦听器放在表单上，​​它将this在函数内，因此您可以执行以下操作：

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

您还可以检查所选索引是否大于零。如果它是零或-1，则选择第一个或不选择（分别）。

你应该把ID属性变成NAME属性，然后你可以重复它们（提交表单时它们会成功）。

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

于 2013-03-20T22:42:03.317 回答
0

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

于 2013-03-20T22:35:07.997 回答
0

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

于 2013-03-20T22:49:40.487 回答