select2，具有依賴的動態下拉菜單PHP / JQuery

Question

嗨，我正在使用select2在我的php文件上設置我依賴的動態下拉列表的樣式，問題是當我從1st下拉列表中選擇一個值以從mysql DB到2nd下拉列表中提取數據時，它會變為默認樣式，因此我需要一些解決方案解決問題的地方是我的文件。
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>

腳本來獲取數據庫值：

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

但是更好的方法是不寫出一個新的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));
       }
     }
   }
  });
}