Question

我有3个这样的下拉列表： problem definition 1

我的代码如下：

<td class="tditemlabel">Category*</td>
<td>
    <select id='catselect' class='catselect' name='catselect' onclick="document.getElementById('subcatselect').disabled=false">
       <option value="0">--Select a category--</option>
            <?php getAllCategories(); ?>
    </select>
</td>
    <td class="formhelp">Choose item category</td>
</tr>
<tr>
    <td class="tditemlabel">Subcategory*</td>
    <td>
        <select id='subcatselect' class='catselect' name='subcatselect' disabled onclick="document.getElementById('subsubcatselect').disabled=false">
            <option value="0">--Select a subcategory--</option>

        </select>
    </td>
</tr>
<tr>
    <td class="tditemlabel">Sub-subcategory*</td>
    <td>
        <select id='subsubcatselect' class='catselect' name='subsubcatselect' disabled>
                <option value="0">--Select a sub-subcategory--</option>

        </select>
    </td>
</tr>

从我的MySQL数据库中正确获取下拉框中的数据。因此，根据类别下拉列表中选择的内容，第二个启用并在那里正确插入数据。到目前为止没问题。

此时我遇到了几个问题：第一个是例如（如下图所示）当我选择“电子产品”时。类别，子类别列表启用并向我显示它具有的3个可能的值（＆＃39;计算机和平板电脑＆＃39;，＃39;智能手机＆＃39;摄影＆＃39;），现在可以看到，第一个选项是自动选择的，因此第三个下拉列表不会自动启用并填充内容。点击第一个也不起作用，我必须点击另一个，然后再次点击第一个，在第3个下拉列表中查看其内容。 Problem statement 2

解决方案可能是添加一个“假”选项＆＃39;无处不在，但在我的例子中，这似乎是一个有点不好的用例。由于我有9个类别，它们都有2到3个子类别，而这些子类别在轮到它们时都有3到4个子类别。如果我必须添加＆＃39;选择子公告＆＃39;在每个下拉列表中（例如2个项目），这似乎是很多无用的信息。（任何人都可以为我提供一个解决方案吗？如果不是，任何人都可以解释我如何在任何地方获取这个虚拟文本，因为我只知道如果它也在数据库中也是如此。）

所以我们遇到的第二个问题是让用户点击一个类别，子类别和子子类别，但现在他想再次更改类别，这就是： Problem statement 3

如何在用户更改类别时再次禁用子子类别下拉列表（并立即启用 正确的 子类别列表）

到目前为止我的JQuery代码是这样的：

$("#catselect").on("change", function() {
    var categoryid = document.getElementById("catselect").value;
    $.post('category_list.php', { catid: categoryid }, function(result) {
            $('#subcatselect').html(result);
       }
   );
});

$("#subcatselect").on("change", function() {
    var subcategoryid = document.getElementById("subcatselect").value;
    $.post('subcategory_list.php', { subcatid: subcategoryid }, function(result) {
            $('#subsubcatselect').html(result);
       }
    );
});

和PHP代码：＆＃39; category_list.php＆＃39; （＆subcharory_list.php＆＃39;文件几乎完全相同）

<?php
require 'includes/functions.php';

$cat_id = $_REQUEST['catid'];
if ($cat_id != 0)
{
    $result = db_query("SELECT categoryid, name FROM category WHERE parent = '$cat_id'");
}

while($row = mysqli_fetch_array($result)) {
    echo '<option value="' . $row['categoryid'] . '">' . $row['name'] . '</option>';
}
?>

Answer 1

非常喜欢（背景仍然存在）：

首先，你的PHP是SQLinjection-ready ...你将你的select（catid）的输入直接发送到数据库...更改它...在创建查询之前确保它是数字。

此外，如果您的查询永远不会被执行，那么在尝试获取行时可能会出现异常...所以将它全部放在if下：

$cat_id = $_REQUEST['catid'];
if ( is_numeric($cat_id) && $cat_id != 0 ) {
    $result = db_query("SELECT categoryid, name FROM category WHERE parent = '$cat_id'");
    while($row = mysqli_fetch_array($result)) {
        echo '<option value="' . $row['categoryid'] . '">' . $row['name'] . '</option>';
    }
}

现在，让我们来看看你的问题。这是您应该需要的完整JavaScript。

var subcat = '<option value="0">--Select a category--</option>';
var subsubcat = '<option value="0">--Select a sub-subcategory--</option>';
// ^^ these should be placed in the new controls

$("#catselect").on("change", function() {
    $.post('category_list.php', 
        { catid: categoryid }, 
        function(result) {
            $('#subcatselect').html(subcat+result);
            $('#subcatselect').change();
        }
    );
});

$("#subcatselect").on("change", function() {
    $.post('subcategory_list.php', 
        { catid: subcategoryid }, 
        function(result) {
            $('#subsubcatselect').html(subsubcat+result);
            $('#subsubcatselect').change(); // I guess you don't need this
        }
    );
});

三个下拉菜单互相响应

1 个答案: