Question

我有两个下拉列表：

<select class="cityId form-control" dir="rtl">
@foreach (var city in Paristan.AgencyPortal.UI.Areas.Cpanel.Components.DropdownHelper.GetCities())
{
    <option value="@city.Value">@city.Text</option>
}
</select>
<select name="travelAirports" class="airports form-control" dir="rtl">
    <option>Select a City</option>
</select>


$(document).on("change", ".cityId", function () {
        $.getJSON("/Cpanel/Package/GetAirportsByCityId", { cityId: $(this).val() }, function (data) {
        $(this).next(".airports").empty();
        for (var i = 0; i < data.length; i++) {
        $(this).next(".airports").append("<option value='" + data[i].AirportId + "'>" + data[i].Name + "</option>");
        }
    });
});

ajax功能正在运行。但我无法通过书面选择器捕捉到下一个下拉列表。即便是以下情况也没有帮助我：

$(this).parent().children().first().next()
$(this).parent().children(".airports")
$(this).nextAll(".airports")

Answer 1

ajax回调中的

this不引用已更改的cityId元素，它引用用于发出请求的ajax设置对象。

您可以使用闭包变量来解决此问题，如

$(document).on("change", ".cityId", function () {
    var $this = $(this);
    $.getJSON("/Cpanel/Package/GetAirportsByCityId", {
        cityId: $(this).val()
    }, function (data) {
        $this.next(".airports").empty();
        for (var i = 0; i < data.length; i++) {
            $this.next(".airports").append("<option value='" + data[i].AirportId + "'>" + data[i].Name + "</option>");
        }
    });
});

Answer 2

这是因为select $.getJSON中的select元素的上下文丢失了。在getJson调用之前在变量中声明上下文并在success函数中使用它：

var self = $(this);
$.getJSON("/Cpanel/Package/GetAirportsByCityId", {
    cityId: $(this).val()
   }, function (data) {
    self.next(".airports").empty();
    for (var i = 0; i < data.length; i++) {
        self.next(".airports").append("<option value='" + data[i].AirportId + "'>" + data[i].Name + "</option>");
    }
});

此外，如果您使用$.ajax代替$.getJSON，则可以使用context选项。

为什么这不适用于jQuery？

2 个答案: