javascript - 根据另一个 的值显示 中的数据

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

服务器端

<?php
require('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);
 }
}