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 유효성 검사 플러그인을 사용하고 있습니다. 이

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; 
    } 
}); 

같은

Answer 1

시도 뭔가 지금 해당 오류 메시지를 표시하거나 가서 양식을 제출 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>