0

ドロップダウンリストを次々と入力しようとしています。これらのドロップダウン リストには、カテゴリとサブカテゴリが含まれています。特定のカテゴリのサブカテゴリがなくなるまで、ドロップダウン リストの作成を続けたいと思います。ドロップダウン リストに MySQL の結果を入力しています。

あちこち検索しましたが、2 つ以上のリストを使用したカスケード ドロップダウン リストへの参照は見つかりませんでした。

私のコードは 2 つのリストに対して機能しますが、それ以上のリストに対しては機能しません。

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>";
?>
4

1 に答える 1

0

問題は、クリック関数の定義が、ページの読み込み時に既にページにあるアイテムにのみ適用されることです。ページには ID が「2」の select オブジェクトがまだないため、$("#2").change関数が関連付けられることはありません。

これを回避するには、select をページに追加した後にそのクリック定義を適用する必要があります。成功関数を次のように変更してみてください。

success: function(output){
    $("#" + newCategory).html(output);
    $("#" + newHTMLID).change(function(e) {
        e.preventDefault();
        getNextCategory(newHTMLID);
    });
}
于 2012-06-26T15:14:06.123 に答える