使用相关动态下拉菜单PHP/JQuery选择2

您好，我正在使用select2为我的php文件上的依赖动态下拉列表设置样式，问题是当我从第一个下拉列表中选择一个值以从mysql DB获取数据到第二个下拉列表时，它将变为默认样式，因此我需要一些解决方案来解决我的文件问题。
选择2脚本：

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

$（文档）.ready（函数（）{
$（“.js示例基本单”）.select2（）；
});

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>

品牌
这是您的样式化选择元素：

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

谢谢你的回答，所以你可以指导我如何将“id”“name”“class”属性添加到我的echo”“；因为我没有得到更新。那有用吗？非常感谢你救了我第一个建议终于奏效了
echo "<select name=\"model\" id=\"model\" class=\"js-example-basic-single\" required>";

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

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