提交前检查下拉菜单

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

来源

2013-03-20 user2123738

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

来源

2013-03-20 22:35:07 Pamma

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>

来源

2013-03-20 22:37:28 lifetimes

我改变了你的建议。但第二个下拉菜单没有正确检查。我可以提交表格。任何提示？ – user2123738 2013-03-20 23:32:42

@ user2123738您是否已将提交按钮从ID更改为类？并拿走提交的名称属性，并将其用作if语句 - if（this.year.value ==“”） – lifetimes 2013-03-20 23:39:06

是的，我有这个： – user2123738 2013-03-20 23:48:50

如果你把听众的形式，这将是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-20 22:42:03 RobG

嗨，RobG，我也检查了我们的建议，但我不能验证下拉菜单。：（（（（ – user2123738 2013-03-21 00:05:29

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

来源

2013-03-20 22:49:40 Paul

提交前检查下拉菜单

回答

相关问题