根据另一个下拉选择过滤HTML下拉列表[重复]

Question

我有多个 HTML 下拉菜单。一次选择后，我希望它自动填充下一个下拉列表。所有这些信息都被引入使用 SQL 语句和 foreach 循环从数据库中填充列表，因此我无法像所有与我的问题相关的示例那样对值进行硬编码。到目前为止，我目前只有一点 JavaScript，尽管我不确定我是否朝着正确的方向前进。我认为这需要涉及一些 AJAX 和 onChange 侦听器。我只是不确定如何开始。

那么我该怎么做呢？我不是要求你为我做这件事，但只是一些代码（如大纲）让我领先并让我继续前进，将不胜感激！谢谢！

SQL 语句：

<?php
$host="xxxxxxx"; 
$dbName="xxxx"; 
$dbUser="xxxxxxxxxxxxxx"; 
$dbPass="xxxxxxxxxxx";


$dbh = new PDO( "sqlsrv:server=".$host."; Database=".$dbName, $dbUser, $dbPass);
$dbh->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
$sql_major = "SELECT DISTINCT [Major Category] FROM vProducts ORDER BY [Major Category] ASC";
$sql_minor = "SELECT DISTINCT [Minor Category] FROM vProducts ORDER BY [Minor Category] ASC";
$sql_code = "SELECT DISTINCT [Product Report Code] FROM vProducts ORDER BY [Product Report Code] ASC";

$dropdown_major = $dbh->query($sql_major);
$dropdown_minor = $dbh->query($sql_minor);
$dropdown_code = $dbh->query($sql_code);
?>

下拉菜单：

<table cellspacing="5" align="center" id="dropdown-table">
    <thead>
      <tr>
        <th>Major Category</th>
        <th>Minor Category</th>
        <th>Report Code</th>
        <th>SKU</th>
      </tr>
    </thead>
    <tbody> 
        <tr>
            <td>


                <select id="major" onChange="updateCat();">
                <option value="" disabled="disabled" selected="selected">Please Select One</option>
    <?php foreach ($dropdown_major->fetchAll() as $drop_major): ?>
                <option
                    value=""
                    data-name="<?php echo $drop_major ['Major Category'];?>"
                >
                    <?php echo $drop_major ['Major Category'];?>
                </option>
        <?php endforeach; ?>
                </select>
            </td>


            <td>
                <select id="minor">
                <option value="" disabled="disabled" selected="selected">Please Select One</option>
    <?php foreach ($dropdown_minor->fetchAll() as $drop_minor): ?>
                    <option
                        value=""
                        data-name="<?php echo $drop_minor ['Minor Category'];?>"
                    >
                        <?php echo $drop_minor ['Minor Category'];?>
                    </option>
        <?php endforeach; ?>
                </select>
            </td>


            <td>
                <select>
                <option value="" disabled="disabled" selected="selected">Please Select One</option>
    <?php foreach ($dropdown_code->fetchAll() as $drop_code): ?>
                    <option
                        value="code"
                        data-name="<?php echo $drop_code ['Product Report Code'];?>"
                    >
                        <?php echo $drop_code ['Product Report Code'];?>
                    </option>
        <?php endforeach; ?>
                </select>
            </td>


            <td>
                <select>
                <option value="" disabled="disabled" selected="selected">Please Select One</option>
                    <option value="sku">SKU</option>
                </select>
            </td>
            <td><input type="button" value="Search" id="searchButton" onclick="show();"></td>
            <td><button class="create-user" id="insertButton">Add Group</button></td>
        </tr>
    </tbody>
</table>

JavaScript：

// JS for Dropdown

function updateCat() {
    var e = document.getElementById("major");
    var majorSelected = e.options[e.selectedIndex];

    document.getElementById("minor").value = majorSelected.dataset.name;
}

Answer 1

作为一个起点，我建议查看关于 AJAX PHP 的 W3schools 部分。

使用 AJAX PHP 的一种方法是利用下拉列表的 DOM onchange 事件，通过 JavaScript 函数中的 XMLHttpRequest 将所选值传递到 PHP 页面。

然后可以将 PHP 页面设置为从数据库返回第二个值列表。返回的数据可能是您的第二个下拉菜单的元素。

查看您的代码，我将执行第一个 SQL 查询以在您的表所在的主页中生成主要类别项目。次要类别项目的第二个 SQL 查询将驻留在进行 AJAX 调用的第二个页面中。只有当下拉列表中的值发生更改时，才会调用第二个查询。

更新 1：添加一些代码

1.主要项目选择框

运行 SQL 查询以生成主要选项的值。

<select id="majoritems" onChange="updateCat();">
<option value="" disabled="disabled" selected="selected">Please Select One</option>
<?php echo $major_options; ?>

2。小物品选择框

<select id="minoritems">
 <option value="" disabled="disabled" selected="selected">Please Select One</option>

3. Javascript AJAX 调用

以下主要借鉴了 W3Schools AJAX PHP 示例。

<script>function updateCat(val){
if (val.length == 0) { 
    document.getElementById("minoritems").innerHTML = "";
    return;
} else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("minoritems").innerHTML = this.responseText;
        }
    };
    xmlhttp.open("GET", "getminoritems.php?q=" + val, true);
    xmlhttp.send();
}}</script>

当调用 getminoritems.php 页面时，会设置 URL 参数，这会将 val 变量作为 GET 变量发送。然后可以使用它根据该值查询数据库中的项目。

4.您的 PHP 页面根据 AJAX GET 调用中发送的值返回次要选项列表

在您的 PHP 页面中，您现在应该能够访问在 AJAX 调用中设置为 val 的 $_GET 变量 q。借此您可以查询您的数据库，例如

$val = $_GET['q'];

$sql_minor = "SELECT DISTINCT [Minor Category] FROM vProducts WHERE category = $val ORDER BY [Minor Category] ASC";

等等等等...你的代码返回值

确保最后返回<option>tags 中的值。它们将在 smallitems 选择元素中输出，因为 javascript 函数使用 .innerhtml 将其设置为从您的 AJAX 调用接收到的响应文本。

希望这会有所帮助！ PS：如果可以的话，我建议您使用 W3schools 教程做一个非常简单的示例，这样您就可以完全了解这里发生的事情。