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

这是一些使用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>

Answer 3

在这里，如果两个选择值相同，则会发出警报，根据您的需要使用五个而不是两个。

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

使用jQuery在提交时下拉列表验证

3 个答案: