使用JQuery級聯下拉列表

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 個解決方案

解決方案1
0 2012-06-26 15:14:06

使用JQuery級聯下拉列表

問題描述

1 個解決方案

解決方案1 0 2012-06-26 15:14:06

解決方案1
0 2012-06-26 15:14:06