带有相关动态下拉列表的 select2 PHP/JQuery

Question

你好，我正在使用 select2 在我的 php 文件中设置我的相关动态下拉列表的样式，问题是当我 select 从第一个下拉列表中获取数据的值时从 mysql DB 到第二个下拉列表，它变成了默认样式，所以我需要一些解决方案来解决这个问题，这是我的文件。
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 元素：

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

带有相关动态下拉列表的 select2 PHP/JQuery

select2 with dependent dynamic dropdown PHP/JQuery

php

jquery

html-select

dynamic

select2