select2與依賴動態下拉PHP/JQuery

Question

嗨我使用select2來樣式我的php文件上的依賴動態下拉列表，問題是當我從第一個下拉列表中選擇一個值從mysql數據庫獲取數據到第二個下拉列表它轉到它的默認樣式，所以我需要一些解決方案來解決這裏的問題是我的文件。
選擇2腳本：

<script type="text/javascript"> 
      $(document).ready(function() { 
       $(".js-example-basic-single").select2(); 
      }); 
     </script> 

的index.php：`

<form name="form1" action="test.php" method="post"> 
      <table> 
       <tr> 
        <td> 
        <select name="brand" id="branddd" class="js-example-basic-single" required> 
         <option disabled selected required >brand</option> 
         <?php  
         $res=mysqli_query($link,"select * from brand"); 
         while($row=mysqli_fetch_array($res)) 
         { 
         ?> 
         <option value="<?php echo $row["id"];?>"><?php echo $row["name"];?></option> 
         <?php 
         } 
         ?> 
        </select> 
        </td> 
       </tr> 
       <tr> 
        <td> 
        <select name="model" id="model" class="js-example-basic-single" required> 
         <option disabled selected required >model</option> 
        </select> 
        </td> 
       </tr> 
       <tr> 
        <td><input type="submit" value="submit"></td> 
       </tr> 
      </table> 
     </form> 

腳本來獲取DB值：

<script type="text/javascript"> 
      function change_brand() 
      { 

       var xmlhttp=new XMLHttpRequest() ; 
       xmlhttp.open("GET","ajax.php?brand="+document.getElementById("branddd").value,false) ; 
       xmlhttp.send(null) ; 
       document.getElementById("model").innerHTML=xmlhttp.responseText ; 

      } 
      $(function(){ 
       $('#branddd').on('change',function(){ 
        this.value && // if value!="" then call ajax 
         $.get('ajax.php',{brand:this.value},function(response){ 
         $('select[name="model"]').html(response); 
        }); 
       }); 
      }); 
     </script> 

ajax.php：

<?php  
      $link=mysqli_connect("localhost","root",""); 
      mysqli_select_db($link,"test_db"); 
      $brand=$_GET["brand"]; 

      if($brand!="") 
      { 
      $res=mysqli_query($link,"select * from model where brand_id=$brand"); 
      echo "<select>"; 
      while($row=mysqli_fetch_array($res)) 
      { 
       echo "<option>"; echo $row["name"]; echo "</option>"; 
      } 
      echo "</select>"; 
      } 
     ?> 

Answer 1

這是你的tyled選擇元素：

<select name="model" id="model" class="js-example-basic-single" required> 

您需要的name，id和class屬性添加到您的PHP回聲。事情是這樣的：

echo "<select name=\"model\" id=\"model\" class=\"js-example-basic-single\" required>"; 

但是一個更好的辦法是不寫了一個新的選擇元素，並與html函數替換它。相反，將PHP頁面中的數據作爲JSON對象輸出，然後將這些選項添加到select元素。

JSON對象：

{ 
    "option1": "Data A", 
    "option2": "Data B", 
    "option3": "Data C" 
} 

的JavaScript：

function change_brand() { 
    $.ajax({ 
    url: "ajax.php?brand="+document.getElementById("branddd").value, 
    dataType: "json", 
    success: function(data) { 
    var name, select, option; 
    select = document.getElementById('model'); 

    // Clear the old options 
    select.options.length = 0; 

    // Load the new options 
    for (name in data) { 
     if (data.hasOwnProperty(name)) { 
     select.options.add(new Option(data[name], name)); 
     } 
    } 
    } 
    }); 
}