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