Question

您好我使用select2来设置我的php文件中的依赖动态下拉列表，问题是当我从第一个下拉列表中选择一个值以从mysql DB获取数据到第二个下拉列表时它会转到它＃39 ; s的默认样式，所以我需要一些解决方案来解决这里的问题是我的文件 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));
       }
     }
   }
  });
}

select2与依赖动态下拉列表PHP / JQuery

1 个答案: