Question

我试图一个接一个地填充下拉列表。这些下拉列表包含类别和子类别。我想继续创建下拉列表，直到特定类别没有更多子类别。我正在使用MySQL的结果填充我的下拉列表。

我已经搜索了所有内容，但找不到任何使用两个以上列表的级联下拉列表的引用。

我的代码适用于两个列表，但不是更多。

partRequest.php

<HTML>
<HEAD>
<script type="text/javascript" src="..\jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    $("#1").change(function(e) {
        e.preventDefault();
        getNextCategory("1");
    });

    $("#2").change(function(e) {
        e.preventDefault();
        getNextCategory("2");
    });

    $("#3").change(function(e) {
        e.preventDefault();
        getNextCategory("3");
    });
});

function getNextCategory(htmlID) {
    var categoryID = ""
    var newHTMLID = 0
    var newCategory = ""
    categoryID = $("#" + htmlID ).val();
    newHTMLID = Number(htmlID) + Number(1)
    newCategory = "category" + newHTMLID
    $.ajax({
        type: "POST",
        url: "findNextCategory.php",
        data: "ID=" + categoryID + "&Number=" + newHTMLID,
        success: function(output){
            $("#" + newCategory).html(output);
        }
    });
}

</script>

</HEAD>
<BODY>

<form name="partSubmissionForm" id="partSubmissionForm" action="" method="POST">

    <table width=147 cellpadding=0 cellspacing=0>
        <tr><td><select id="1">
            <?PHP 
            $query = "SELECT Name, ID FROM categories WHERE ParentID = 0";
            $result = mysql_query($query);
            while ($row=mysql_fetch_array($result)){
            ?>
            <option value="<? echo $row['ID'];?>"> <? echo $row['Name'];?></option>
                <?}?>
            </select>
        </td>
        <td>
            <div id="category2">
                test2
            </div>
        </td>
        <td>
            <div id="category3">
                test3
            </div>
        </td>
        </tr>        
        <tr><td><input type="submit" name="submit" id="submit" value="GO"></td></tr>
        </table>
</form>


</BODY>

</HTML>

findNextCategory.php

<?PHP
define('INCLUDE_CHECK',true);
include ('..\db.php');

$categoryID = $_POST['ID'];
$categoryFieldNum = $_POST['Number'];
echo $categoryID;
echo $categoryFieldNum;
$query = "SELECT Name, ID FROM categories WHERE ParentID = $categoryID";
echo $query;
echo "<select id=$categoryFieldNum>";
    $query = "SELECT Name, ID FROM categories WHERE ParentID = $categoryID";
    $result = mysql_query($query);
    while ($row=mysql_fetch_array($result)){
        $optionValue = $row['ID'];
        $optionText = $row['Name'];
        echo "<option value='$optionValue'> $optionText </option>";
    }
echo "</select>";
?>

Answer 1

问题是您的点击功能定义仅适用于页面加载时页面上已有的项目。由于您在页面上没有id为“2”的选择对象，因此您的$("#2").change函数无法附加。

要解决此问题，您需要做的是在将选择添加到页面后应用该点击定义。尝试将您的成功功能更改为：

success: function(output){
    $("#" + newCategory).html(output);
    $("#" + newHTMLID).change(function(e) {
        e.preventDefault();
        getNextCategory(newHTMLID);
    });
}

使用JQuery级联下拉列表

1 个答案: