select2 with dependent dynamic dropdown PHP/JQuery

Question

こんにちは私select2を使用して私のPHPの依存する動的ドロップダウンリストのスタイルを設定するとき、問題は私が最初のドロップダウンからmysql DBから2番目のドロップダウンリストにデータをフェッチするときの値ですそれはそれがデフォルトのスタイルになるので、ここで問題を解決するために私のファイルが必要です。
SELECT2スクリプト：

<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

これはあなたのselect要素をtyled：

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

あなたはあなたのPHPのエコーにname、id、およびclass属性を追加する必要があります。このような何か：

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

しかし、もっと良い方法は、新しいselect要素を書き出すと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)); 
     } 
    } 
    } 
    }); 
}