顯示數據<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);
            }
        });
    }
}

服務器端

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