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

Dropdowns的：

<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 Call

以下主要介绍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页面中，您现在应该能够访问在值为val的AJAX调用中设置的$ _GET变量q。这样你可以查询你的数据库，例如

$val = $_GET['q'];

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

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

确保最后返回<option>个标记内的值。它们将在minoritems select元素中输出，因为javascript函数使用.innerhtml将其设置为从AJAX调用接收的响应文本。

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

根据另一个下拉列表选择过滤HTML下拉列表

1 个答案: