提交前檢查下拉菜單

我使用此代碼來檢查提交前是否選擇了下拉菜單。在我的頁面上我有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

提交前檢查下拉菜單

回答

相關問題