下拉列表驗證上使用jQuery

Question

我有五個下拉列表，在我的形式相同的選項，並應該有驗證一個下拉不能有哪些已經從以前的下拉選擇的值提交...

<select id ="selected" name="expenseType" class="dynamic_select" > 
    <option value="0">-select-</option> 
    <option value="1">Van</option> 
    <option value="2">SUV</option> 
    <option value="3">Hatcback</option> 
    <option value="4">Jeep</option> 
</select> 

在提交時，我該如何驗證？我正在使用jQuery驗證插件來驗證表單。

Answer 1

嘗試這樣的事情

var isValid = true; 
var $dynamicSelect = $("select.dynamic_select"); 
$dynamicSelect.each(function(){ 
    if($dynamicSelect.find("option[value="+this.value+"]:selected").length > 1){ 
     isValid = false; 
     return false; 
    } 
}); 

現在使用isValid變量來顯示相應的錯誤消息或繼續前進，提交表單。

Answer 2

在這裏你會發現如果兩個選擇是相同的值，只需使用五個而不是兩個根據你的需要。

<script type="text/javascript"> 
     $(document).ready(function(){ 
      $('#target').bind('submit', function(){ 
       if($('#selected1').val() == $('#selected2').val()){ 
        alert($('#selected1').val()+" "+ $('#selected2').val()); 
       } 
      }); 
     }); 
    </script> 



<form method="post" id="target"> 
<select id ="selected1" name="expenseType" class="dynamic_select" > 
    <option value="0">-select-</option> 
    <option value="1">Van</option> 
    <option value="2">SUV</option> 
    <option value="3">Hatcback</option> 
    <option value="4">Jeep</option> 
</select> 
    <select id ="selected2" name="expenseType" class="dynamic_select" > 
    <option value="0">-select-</option> 
    <option value="1">Van</option> 
    <option value="2">SUV</option> 
    <option value="3">Hatcback</option> 
    <option value="4">Jeep</option> 
</select> 
<input type="submit" value="submit"/> 
</form> 

Answer 3

這裏是一些腳本，它使用jQuery驗證器框架來做我認爲你在做的事情。

<script type="text/javascript"> 
    $(function() { 
     $.validator.addMethod('uniqueselection', function (v, e, d) { 
      if (v == '-select-') { 
       return true; 
      } 
      if ($(".dynamic_select option[value='" + v + "']:selected").size() > 1) { 
       return false; 
      } 
      return true; 
     }); 

     $('select').each(function() { 
      $(this).rules('add', { uniqueselection: 'This can be selected once' }); 
     }); 
    }); 
</script>