引导模式中的下拉列表 onchange 不起作用

Question

我有一个包含 jQuery 数据表的 Web 表单（.Net、C#）。每行都有一个“编辑”链接，单击该链接会打开一个引导模式并填充控件。我在此模式中有两个下拉菜单：Area 和 District，其中 District 是根据 Area 的选定值填充的。为了避免在更改区域时关闭回发模式，我正在尝试进行 ajax 调用来填充区域下拉列表。

不知何故，我的 onchange 函数没有被调用。另外，我不确定整个设置是否正确（显然，不是！）

这就是我所拥有的（淡化版）：

HTML：

<asp:UpdatePanel ID="upAddEditModal" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
    <ContentTemplate>
        <div class="modal fade" id="editModal" role="dialog" aria-labelledby="editLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg fade in ui-draggable">
                <div class="modal-content">                    
                    <div class="modal-header ui-draggable-handle">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title"><span id="spnEditHeader"></span></h4>
                    </div>
                    <div class="modal-body"> 
                        <div class="row">               
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label for="ddlArea">Area</label>
                                    <asp:DropDownList runat="server" 
                                        ID="ddlArea" 
                                        ClientIDMode="Static" 
                                        CssClass="form-control" 
                                        DataTextField="AreaName" 
                                        DataValueField="AreaID" 
                                        AppendDataBoundItems="true">
                                        <asp:ListItem Text="Select Area" Value="-1" />
                                    </asp:DropDownList>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label for="ddlDistrict">District</label>
                                    <asp:DropDownList runat="server" 
                                        ID="ddlDistrict" 
                                        Enabled="false" 
                                        ClientIDMode="Static" 
                                        CssClass="form-control" 
                                        DataTextField="DistrictName" 
                                        DataValueField="DistrictID" 
                                        AppendDataBoundItems="true">
                                        <asp:ListItem Text="Select District" Value="-1" />
                                    </asp:DropDownList>
                                </div>
                            </div>
                        </div>
                </div>
            </div>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

<script>
    $(function () {debugger
    $("#ddlArea").change(function () {
        var areaID = this.value;
        populateDistrictDDL(areaID);
    });

    function populateDistrictDDL(areaID) {debugger
        $.ajax({
            type: "POST",
            url: '<%= ResolveUrl("services/mpoo.asmx/GetDistrictsByAreaID") %>',
            data: areaID,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {debugger
                $("#ddlDistrict").empty().append($("<option></option>").val("-1").html("Select District"));
                $.each(msg.d, function () {
                    $("#ddlDistrict").append($("<option></option>").val(this['Value']).html(this['Text']));
                });
            },
            error: function (xhr) {debugger
                alert(xhr.responseText);
            }
         });
     };
    };
</script>

[WebMethod]
[ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]

public string GetDistrictsByAreaID(string AreaID)
{
    string JSONresult = string.Empty;

    if (string.IsNullOrEmpty(AreaID))
        return JSONresult;

    DataTable dt = BLL.GetDistrictsByAreaID(int.Parse(AreaID));
    JSONresult = JsonConvert.SerializeObject(dt);
    return JSONresult;
}

解决方案：

以下更改是使问题消失的原因。它部分基于 Rahul 的建议，我将其标记为答案。

$(document).on('change', '#ddlArea', function () {
    var areaID = this.value;
    populateDistrictDDL(areaID);
});

function populateDistrictDDL(areaID) {
    $.ajax({
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        url: '<%= ResolveUrl("services/mpoo.asmx/GetDistrictsByAreaID") %>',
        cache: false,
        data: JSON.stringify({ "AreaID": areaID }), <-- this was changed
    }).done(function (result) {
        $("#ddlDistrict").empty().append($("<option></option>").val("-1").html("Select District"));
        jResult = JSON.parse(result.d); <-- this was added
        $.each(jResult, function (val, txt) {
            $("#ddlDistrict").append($("<option></option>").val(null == txt.DistrictID ? '-1' : txt.DistrictID).html(txt.DistrictName)); <-- this was changed
        });
    }).fail(function (jqXHR, textStatus, errorThrown) {
        var errMsg = textStatus + ' - ' + errorThrown + '... Status: ' + jqXHR.status + ",  ResponseText: " + jqXHR.responseText;
    });
}

Answer 1

你的脚本是问题试试这个

    <script>
       $(function(){
        $("#ddlArea").on('change',function () {
            var areaID = this.value;
            populateDistrictDDL(areaID);
        });

        function populateDistrictDDL(areaID) {debugger
            $.ajax({
                type: "POST",
                url: '<%= ResolveUrl("services/mpoo.asmx/GetDistrictsByAreaID") %>',
                data: areaID,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {debugger
                    $("#ddlDistrict").empty().append($("<option></option>").val("-1").html("Select District"));
                    $.each(msg.d, function () {
                        $("#ddlDistrict").append($("<option></option>").val(this['Value']).html(this['Text']));
                    });
                },
                error: function (xhr) {debugger
                    alert(xhr.responseText);
                }
             });
         };
});
</script>

你也可以像 tis 那样做，哪个更受欢迎

$(document).on('change','#ddArea',function(){
//your code
})

Answer 2

这样做的最简单的方法是

$('#editModal').on('shown.bs.modal', function () {

        $(document).on("change", "#ddArea", function (e) {

            var yourvar = this.value;

        });