1

我在使用更改功能时遇到问题。我有两个不同的下拉菜单相互连接。当第一个发生变化时，第二个也发生变化。我使用 jquery ajax 做到了。但是当我使用 ID 的 jquery 只能工作一次。所以我对 javascript 的 this,parent 和 children 关键字进行了研究，但我找不到合适的方法。

所以我的javascript如下：

    <script>
           $(document).ready(function() {
            //  alert('js working');
            $(".catSelectedClass").change(function() {
                //  alert('i'm inside the function dude');
                function ustCat() {         
                    alert(this);
                    var mainCatID = $(this).val();
                    alert('mainCatID captured');
                    var id = $(this).parent().$(".catIDClass").val();
                    //  alert(id);
                    //  alert(mainCatID);
                    $.ajax({
                        type: "POST",
                        url: "panel/catGroupPost.php",
                        data: {id: id, mainCatID: mainCatID}
                    }).done(function(data) {
                        var responseData = data;

                        alert(responseData);
                        $('#subCat').html($(data));

                    });
                }
                ustCat();
            });
            $(".subCatClass").change(function() {

                function subCat() {
                    var mainCatID = $(this).val();
                    var id = $('#catID').val();

                    $.ajax({
                        type: "POST",
                        url: "panel/subCatPost.php",
                        data: {id: id, mainCatID: mainCatID}
                    }).done(function() {
                        alert('its done. its gone. Yes Mr.Frodo. Its all over now !!');
                    });
                }
                subCat();
            });
        });

    </script>

这就是填充下拉列表的方式：

 while ($cat = mysql_fetch_array($cat_query)) {


$catTable.= '<label>' . $cat['name'] . '</label>';
$catTable.= '<div class="catContainer"><div id="catPost" class="catPostClass">';
$catTable.= '<input type="text" id="catID" class="catIDClass" value="' . $cat['id'] . '"><select id="catSelected" class="catSelectedClass" name="catSelected"><option value="0">Seçiniz...</option>' . catOption($cat['mainCatID']) . '</select></div>';
$kategoriTablosu.= '<div id="subCat"><select id="subCatID" class="SubCatClass"><option value="0">Seçiniz...</option>' . subCatOption($cat['mainCatID']) . '</select></div></div>';


}

我的两个功能：

  function catOption($id) {
$query = mysql_query("SELECT * FROM mainCats WHERE id=mainCatID") or die(mysql_error());
$arrCat = "";

while ($row = mysql_fetch_array($query)) {
    $arrCat .= '<option value="' . $row['mainCatID'] . '"';
    if ($row['id'] == $id) {
        $catSelected = 'selected="selected"';
    } else {
        $catSelected = "";
    }

    $arrCat .= '' . $catSelected . '>' . $row['name'] . '</option>';
}
return $arrCat;
 }

和 ：

    function subCatOption($subID) {

$subCat = mysql_query("SELECT * FROM mainCats WHERE mainCatID='$subID' ORDER BY id ") or die(mysql_error());
$subArrCat = "";

while ($row = mysql_fetch_array($subCat)) {
    $subArrCat .= '<option value="' . $row['mainCatID'] . '"';
    if ($row['mainCatID'] == $subID) {
        $catSelected = 'selected="selected"';
    } else {
        $catSelected = "";
    }

    $subArrCat .= '' . $catSelected . '>' . $row['name'] . '</option>';
}
return $subArrCat;
  }

谢谢你的帮助 ！

4

4 回答 4

1

您需要将代码更改为

$(".catSelectedClass").change(function() {
    var mainCatID = $(this).val();
    //Rest of code....
});

代替

$(".catSelectedClass").change(function() {
    //  alert('i'm inside the function dude');
    function ustCat() { 
        var mainCatID = $(this).val();
        //Rest of code....
    }
});

与$(".subCatClass").change(function() {

一般语法

$(selector).change(function() {
  //do something
});

如果您已经定义了函数使用

$(selector).change(your_defined_function);

在您的情况下，您可以使用

  $(".catSelectedClass").change(ustCat);
于 2013-08-30T12:24:08.810 回答
0

问题是您在事件处理程序中调用了一个函数。如果您改为将代码放在事件处理程序中，或者您在处理程序中打开函数，它应该可以解决您的问题。我建议将该函数设为事件处理程序。因此，只需将 ustCat 放在其自身上并使用以下内容使该函数成为处理程序

$(".catSelectedClass").change(ustCat);
于 2013-08-30T12:25:46.277 回答
0

您不需要 change 函数中的函数。你可以简单地做：

$(".catSelectedClass").change(function () {
    //  alert('i'm inside the function dude');
    alert(this);
    var mainCatID = $(this).val();
    alert('mainCatID captured');
    var id = $(this).parent().$(".catIDClass").val();
    //  alert(id);
    //  alert(mainCatID);
    $.ajax({
        type: "POST",
        url: "panel/catGroupPost.php",
        data: {
            id: id,
            mainCatID: mainCatID
        }
    }).done(function (data) {
        var responseData = data;

        alert(responseData);
        $('#subCat').html($(data));

    });

});
$(".subCatClass").change(function () {
    var mainCatID = $(this).val();
    var id = $('#catID').val();

    $.ajax({
        type: "POST",
        url: "panel/subCatPost.php",
        data: {
            id: id,
            mainCatID: mainCatID
        }
    }).done(function () {
        alert('its done. its gone. Yes Mr.Frodo. Its all over now !!');
    });
});

你这样做的方式this是在错误的范围内。this将是window。

于 2013-08-30T12:27:39.417 回答
0

有几种方法可以做到这一点。

您实际上不需要定义 ustCat，只需将代码放在更改函数中即可：

$(".catSelectedClass").change(function() {
    var mainCatID = $(this).val();
    ....
});

或者在调用内部函数之前分配父级：

$(".catSelectedClass").change(function() {
    (function ustCat(self){
        var mainCatID = self.val();
        ......
    })($(this));
});

或者将 ustCat 函数放在 elsewere 中，然后将其传递给更改处理程序：

function ustCat(){ var mainCatID = $(this).val(); ...... };
$(".catSelectedClass").change(ustCat);
于 2013-08-30T12:34:19.643 回答