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

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

1 个答案: