如何在其主Dropdownlist更改事件在表行上运行时填充下拉列表

Question

ddlInjuryType和ddlInjurySubType是同一行中的两个下拉列表，该行将在添加按钮单击时动态克隆到下一行。以下代码未填写“ddlInjurySubType”

$("#tblSurgery").on('change', 'select.ddlInjuryType', function (event) {
     $.ajax({
                        type: "POST",
                        url: "Surgery.aspx/FetchInjurySubType",
                        data: JSON.stringify({ typeId: $(this).val(), locale: 'en-US' }),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            if (data.d.length > 0) {

                                $(this).find(".ddlInjurySubType").empty().append("<option value='0'>--Select Injury Type--</option>").append(data.d);

                            }

                        }
                    });
    });

Answer 1

使用以下

替换您的代码

    $("#tblSurgery").on('change', 'select.ddlInjuryType', function (event) {

event.stopPropagation();
event.stopImmediatePropagation();
var ddlInjuryType = $(this);

         $.ajax({
                            type: "POST",
                            url: "Surgery.aspx/FetchInjurySubType",
                            data: JSON.stringify({ typeId: $(ddlInjuryType).val(), locale: 'en-US' }),
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (data) {
                                if (data.d.length > 0) {

                                    $(ddlInjuryType ).parent().parent().find(".ddlInjurySubType").empty().append("<option value='0'>--Select Injury Type--</option>").append(data.d);

                                }

                            }
                        });
        });

Answer 2

我得到了答案

 $("#tblSurgery").on('change', 'select.ddlInjuryType', function (event) {
    var trIndex= $(this).closest('tr').index();


         $.ajax({
                            type: "POST",
                            url: "Surgery.aspx/FetchInjurySubType",
                            data: JSON.stringify({ typeId: $(ddlInjuryType).val(), locale: 'en-US' }),
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (data) {
                                if (data.d.length > 0) {

                                    $("#tblSurgery tr:eq(" + trIndex+1 + ")").closest("tr").find(".ddlInjurySubType").empty().append("<option value='0'>--Select Injury Sub Type--</option>").append(data.d);

                                }

                            }
                        });
        });

Answer 3

您的代码中存在范围问题，this未引用已更改的元素。您应该将this对象缓存在success处理程序之外：

var _this = this;

然后，您可以在成功处理程序中使用缓存对象，或将context属性设置为this：

$.ajax({
   context: this,
   // ...
})