根据另一个 <select> 的值在 <select> 中显示数据

Question

我有一个带有两个下拉菜单的表单，我想要做的是在第一个下拉菜单中根据选择的值选择一个选项时创建一个 sql 查询，该查询调用值相等的所有行并显示结果第二个下拉菜单。我的代码    <form enctype = 'multipart/form-data' method = 'post' action = '' onChange='getManufacturer'>    <tr>        <td>Vehicle Manufacturer      <select name = 'Manufacturer' id='M' onchange = "getModels(this.value)">        <?php                foreach($Manufacturers as $m)        {?>          <option value = '<?php echo $m['Manufacturer'] ?>'> <?php echo $m['Manufacturer'] ?></option>        <?php        }        ?>                <option Onclick="new_manufacturer()"> + Add New </option>            </select>    </td>    </tr>    <tr>        <td>Vehicle Model            <select name = 'Model' id='MO'>                <option Onclick="new_model()"> + Add New </option>            </select>         </td>    </tr></form我一直在考虑使用 onchange 函数并通过 ajax 发送值来获取我想要的值客户端<script>function getModels(Manufacturer){    if(Manufacturer == "")    {        $.ajax({            url: 'getModels.php',            type: 'post',            data: {Manufacturer: Manufacturer},            //contentType: false,            success: function(data){                console.log(data);            }        });    }}服务器端<?phprequire('Vehicle_Type.php');if(isset($_POST['Manufacturer'])){    require('connection.php');    $sql = "SELECT Models FROM vehicles            WHERE Manufacturer = $_POST['Manufacturer']            GROUP BY Models    ";    $rs = $db->query($sql);    $db =null;  }    catch(PDOException $e){      die($e->getMessage());  }}?>我的问题是我不知道如何在第二个下拉菜单中显示我检索到的数据。

Answer 1

您需要做的第一件事是将查询结果传递回一个函数，该函数将填充select页面中的元素。不过，您的 PHP 代码似乎没有返回任何内容。

为了轻松地在页面上填充您的元素，请返回一个简单的数组。

while(($row =  mysqli_fetch_assoc($rs))) {

        $Myarray[] = $row['Models'];

    }

}

echo json_encode($Myarray);

此外，更改success为运行pop_select下面的函数（或您喜欢的任何名称）。

$.ajax({

            url: 'getModels.php',

            type: 'post',

            data: {Manufacturer: Manufacturer},

            //contentType: false,

            success: function(data) {

                    myarray = JSON.parse(data);

                    pop_select(myarray);

            }

以下是使用调用结果填充select元素的方式：

function pop_select(Myarray) {

var select = document.getElementById("Model");

for(i = 0; i < Myarray.length; i++) {

    var opt = Myarray[i];

    var el = document.createElement("option");

    el.textContent = opt;

    el.value = opt;

    select.appendChild(el);

 }

}