無法驗證下拉

Question

我有以下形式：

    <div class="form-group"> 
        <label class="control-label">Product</label> 
        <div class="controls"> 
         <select class='dropdown' style="width:50%" id="dropdown1" name="dropdown1" required="required"> 
          <option></option> 
          <?php echo $q1; ?> 
         </select> 
         <span class="help-block">This is a description</span> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="control-label">Issue</label> 
        <div class="controls"> 
         <select class='dropdown' style="width:50%" id="dropdown2" name="dropdown2" required="required"> 
         </select> 
         <span class="help-block">This is a description</span> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="control-label">Issue</label> 
        <div class="controls"> 
         <select class='dropdown' style="width:50%" id="dropdown3" name="dropdown3" required="required"> 
         </select> 
         <span class="help-block">This is a description</span> 
        </div> 
       </div> 

和下面的JavaScript：

<script> 
//Support 
$(document).ready(function() { 
    var obj = $.parseJSON('<?php echo $all; ?>'); 

    $("#add_ticket_form").validate({ 
     errorClass: "help-inline", 
     errorElement: "span", 
     highlight: function(element, errorClass, validClass) { 
      $(element).parents('.form-group').addClass('has-error'); 
     }, 
     unhighlight: function(element, errorClass, validClass) { 
      $(element).parents('.form-group').removeClass('has-error'); 
      $(element).parents('.form-group').addClass('has-success'); 
     } 
    }); 

    $("select").select2({ 

    }); 

    $("#dropdown1").change(function() { 
     $('#dropdown2').find('option').remove().end(); 
     if (obj[$(this).val()] !== undefined) 
     { 
      $('#dropdown2').append(obj[$(this).val()]); 
      $('#dropdown2').rules('add', 'required'); 

     } 
     else 
     { 
      //$('#dropdown2').attr('disabled', true); 
      //$('#dropdown2').attr('required', false); 
     } 

    }); 
    $("#dropdown2").change(function() { 
     $('#dropdown3').find('option').remove().end(); 
     if (obj[$(this).val()] !== undefined) 
     { 
      $('#dropdown3').attr('disabled', false); 
      $('#dropdown3').rules('add', 'required'); 
      $('#dropdown3').append(obj[$(this).val()]); 

     } 
     else 
     { 
      $('#dropdown3').attr('disabled', true); 
      $('#dropdown3').attr('required', true); 
     } 

    }); 

}); 

當我試圖驗證我的表格，沒有觸及下拉列表，驗證器突出顯示他們每個人都說他們是必需的。但是，當我觸摸第一個下拉列表並更改其值，然後單擊該按鈕時，它會顯示第一個AND THE 2ND下拉列表正確，只有第三個下拉列表不正確。看起來問題是由.append函數引起的，因爲當我註釋它時，它就像一個魅力。

Answer 1

看起來像.append會導致列表中的第一個元素自動選擇當應用jquery select2時不可見的內容。 Modyfing功能添加一個空元素解決了這個問題：

$('#dropdown2').append('<option></option>' + obj[$(this).val()]);