Javascript 提交前检查下拉列表

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

<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>

$（文档）.ready（函数（）{
$（“#提交”）。单击（函数（）{
var year=$（“#year option:selected”）.val（）；
如果（年份==“”）
{
$（“#msg”）.html（“请选择一年”）；
返回false；
}
});
});

我的HTML:

<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>

<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>

奥拉
1991
1992
1993
1994
1995
奥拉
1991
1992
1993
1994
1995

因为两个元素的id相同，所以选择器在第一个id匹配的情况下工作。请尝试使用不同的id或使用类而不是id

---

或者使用jquery each函数，因为两个元素的id相同，所以选择器与第一个id匹配。请尝试使用不同的id或使用类而不是id 或者使用jquery，每个函数都应该是唯一的，并且只能使用一次。我建议你改为给他们所有的类

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>

$（文档）.ready（函数（）{
$（“.submit”）。单击（函数（）{
var year=$（'.year选项：选中'）.val（）；
如果（年份==“”）{
$（“.msg”）.html（“请选择一年”）；
返回false；
}
});
});

应该是唯一的，并且只使用一次。我建议你改为给他们所有的类

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>

$（文档）.ready（函数（）{
$（“.submit”）。单击（函数（）{
var year=$（'.year选项：选中'）.val（）；
如果（年份==“”）{
$（“.msg”）.html（“请选择一年”）；
返回false；
}
});
});

如果您将侦听器放在表单上，它将是函数中的

此

，因此您可以执行以下操作：

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

$（“”）。单击（函数（）{
如果（this.year.value==“”）{
$（“#msg”）.html（“请选择一年”）；
返回false；
}否则{
$（“#msg”）.html（“”）；
}
})

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

您应该将ID属性转换为NAME属性，然后可以重复它们（当表单提交时，它们将成功）

---

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

如果将侦听器放在表单上，它将在函数中

此

，因此您可以执行以下操作：

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

$（“”）。单击（函数（）{
如果（this.year.value==“”）{
$（“#msg”）.html（“请选择一年”）；
返回false；
}否则{
$（“#msg”）.html（“”）；
}
})

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

您应该将ID属性转换为NAME属性，然后可以重复它们（当表单提交时，它们将成功）

---

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

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

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

我已经按照你的建议做了改变。但第二个下拉列表未正确检查。我可以提交表格。有什么提示吗？@user2123738您是否也将提交按钮从id更改为class？去掉submit的name属性，并将其用作if语句-if（this.year.value==“”）是的，我有这个：我已经按照您的建议进行了更改。但第二个下拉列表未正确检查。我可以提交表格。有什么提示吗？@user2123738您是否也将提交按钮从id更改为class？去掉submit的name属性，并将其用作您的if语句-if（this.year.value==“”）是的，我有这个：Hi RobG，我也检查了您的建议，但我无法验证下拉列表：你好，罗布，我也检查了我们的建议，但我无法验证下拉列表((((