从动态创建的控件进行ajax调用

本文关键字：ajax 调用 控件 动态 创建 | 更新日期: 2023-09-27 18:04:32

我有一个父下拉列表(命名为ddlCountry在这里之后)对所选的索引变化，我正在做一个ajax调用，以在级联的下拉列表中呈现相关数据(就像如果我在父下拉列表中选择一个国家，它会给我在ddlState的状态名称)

与此同时，我在btnClone按钮中的clone()函数的帮助下克隆ddlCountry和ddlState。我希望动态生成的控件显示相同的行为。就像在ddlCountry_1中选择一个项目一样，在ddlState_1中应该有正确的州名，以此类推… 下面是我的代码: 
<body>
<form id="form1" runat="server">
    <div>           
        <asp:Button ID="btnClone" Text="Clone" runat="server" />
    </div>
    <br />
    <br />
    <table>
        <tr>
            <td>Cateogry:
            </td>
            <td>
                <div>
                    <asp:DropDownList ID="ddlCountryList" runat="server" class="ddlCountryClass"></asp:DropDownList>
                </div>
            </td>
            <td>SubCategory:
            </td>
            <td>
                <div>
                    <asp:DropDownList ID="ddlStateList" runat="server" class="ddlStateClass"></asp:DropDownList>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="target">
                </div>
            </td>
            <td>
                <div id="target2">
                </div>
            </td>
        </tr>
    </table>
</form>
<script type="text/javascript">
    $(function () {
        $("[id*=btnClone]").bind("click", function () {
            var index = $("#target select").length + 1;
            //Clone the DropDownList
            var ddl = $("[id$=ddlCountryList]").clone();
            //Set the ID and Name
            ddl.attr("id", "ddlCountryList_" + index);
            ddl.attr("name", "ddlCountryList_" + index);
            //[OPTIONAL] Copy the selected value
            var selectedValue = $("[id$=ddlCountryList] option:selected").val();
            ddl.find("option[value = '" + selectedValue + "']").attr("selected", "selected");
            //Append to the DIV.
            $("#target").append(ddl);
            $("#target").append("<br /><br />");
            return false;
        });
    });
    $(function () {
        $("[id*=btnclone]").bind("click", function () {
            var index = $("#target2 select").length + 1;
            //clone the dropdownlist
            var ddl = $("[id$=ddlstatelist]").clone();
            //set the id and name
            ddl.attr("id", "ddlstatelist_" + index);
            ddl.attr("name", "ddlstatelist_" + index);
            //[optional] copy the selected value
            var selectedvalue = $("[id$=ddlstatelist] option:selected").val();
            ddl.find("option[value = '" + selectedvalue + "']").attr("selected", "selected");
            //append to the div.
            $("#target2").append(ddl);
            $("#target2").append("<br /><br />");
            return false;
        });
    });
    //  Make Ajax call to fetch the state values.
    $(function () {
        $('#ddlStateList').attr('disabled', 'disabled');
        $('#ddlStateList').append('<option selected="selected" value="0">Select State</option>');
        $('#ddlCountryList').change(function () {
            var country = $('#ddlCountryList').val()
            $('#ddlStateList').removeAttr("disabled");
            $.ajax({
                type: "POST",
                url: "Default.aspx/BindStates",
                data: "{'country':'" + country + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    var j = jQuery.parseJSON(msg.d);
                    var options;
                    for (var i = 0; i < j.length; i++) {
                        options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>'
                    }
                    $('#ddlStateList').html(options)
                },
                error: function (data) {
                    alert('Something Went Wrong')
                }
            });
        });
    });           
</script>

从动态创建的控件进行ajax调用

为了让克隆的下拉菜单继承原始下拉菜单的行为，您需要做几件事。

首先，正如jQuery文档中关于.clone()的描述，您需要将true传递给clone函数，以便它克隆数据和事件。

其次，您将希望重写#ddlCountryList更改函数，使其不引用特定的id——它需要能够使用触发事件的元素(其中一个国家下拉列表)，并找出相应的状态下拉列表，以便填充数据。一种可能的方法如下:

$('#ddlCountryList').change(function () {
    var $countryDropdown = $(this); // "this" is the event source
    var country = $countryDropdown.val();
    // Figure out the index of the country dropdown
    var index = $countryDropdown.attr('id').split("_")[1] || "";
    if (index) {
      index = "_" + index;
    }
    var $stateDropdown = $("#ddlStateList" + index);
    $stateDropdown.removeAttr("disabled");
    $.ajax({
        type: "POST",
        url: "Default.aspx/BindStates",
        data: "{'country':'" + country + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            var j = jQuery.parseJSON(msg.d);
            var options;
            for (var i = 0; i < j.length; i++) {
                options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>'
            }
            $stateDropdown.html(options)
        },
        error: function (data) {
            alert('Something Went Wrong')
        }
    });
});

免责声明:此代码片段尚未经过测试，但它给出了基本的思想。

相关文章：