Question

我在选定的索引更改中有一个父下拉列表（在此后命名为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>

Answer 1

为了让你的克隆下拉列表继承原作的行为，你将不得不做几件事。

首先，正如.clone()的jQuery文档中所述，您需要将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')
        }
    });
});

免责声明：此代码段尚未经过测试，但它提供了基本概念。

从动态创建的控件

1 个答案: