在< select>中显示数据基于另一个< select>的值 [英] Displaying data in <select> based on the value of another <select>

问题描述

我有一个带有两个下拉菜单的表单，我想要做的是在第一个下拉菜单中基于所选值选择一个选项时创建一个sql查询，该查询调用值相等的所有行并显示结果显示在第二个下拉菜单中.

I have a form with two drop down menus, what I want to do is when an option is chosen in the first drop down menu based on the value chosen create an sql query that calls all rows where the value is equal and display the result in the second drop down menu.

我的代码

    <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发送该值以获取我想要的值

I have been thinking of using an onchange function and sending the value through ajax to get the values I want like this

客户端

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

?>

我的问题是我不知道如何显示第二个下拉菜单中检索到的数据.

My problem is I don't know how to display the data I retrieve in the second drop down menu.

推荐答案

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

First thing you need to do is to pass the result of your query back to a function that will populate the select element in your page. Your PHP code doesn't seem to be returning anything though.

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

In order to easily populate your element on the page, return a simple array.

while(($row =  mysqli_fetch_assoc($rs))) {
        $Myarray[] = $row['Models'];
    }
}

echo json_encode($Myarray);

此外，更改success以运行下面的pop_select函数(或您喜欢的任何名称).

Also, change success to run the pop_select function below (or whatever name you like).

$.ajax({
            url: 'getModels.php',
            type: 'post',
            data: {Manufacturer: Manufacturer},
            //contentType: false,
            success: function(data) {
                    myarray = JSON.parse(data);
                    pop_select(myarray);
            }

这是使用调用结果填充select元素的方式:

And here's how you'd populate the select element with the result of the call:

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>的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！