Question

我在使用更改功能时遇到了麻烦。我有2个不同的下拉相互连接。当第一个更改时，第二个也会更改。我是用jquery ajax做的。但是当我使用ID时，jquery只能工作一次。所以我做了一个关于javascript这个，父母和孩子关键字的研究，但我找不到合适的方式。

所以我的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;
  }

感谢您的帮助！

Answer 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);

Answer 2

问题是你在事件处理程序中调用了一个函数。如果你把代码放在事件处理程序中，或者你在处理程序中转换函数，它应该解决你的问题。我建议让函数成为事件处理程序。所以只需将ustCat放在自己的位置并使用以下命令使函数成为处理程序

$(".catSelectedClass").change(ustCat);

Answer 3

您不需要更改功能内的功能。你可以这样做：

$(".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。

Answer 4

有几种方法可以做到。

你真的不需要定义ustCat，你可以把代码放在change函数中：

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

或在调用内部函数之前指定父级：

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

或者将ustCat函数放在其他位置并将其传递给更改处理程序：

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

如何使用javascript这个关键字与更改功能

4 个答案: