Question

我创建了两个asp.net下拉控件来呈现一个国家和它的状态。我点击这里有一个输入按钮，我应该克隆类别和它的子类别下拉列表（它确实如此）。

问题在于：

在更改国家（类别）下拉列表中的索引时，我将获得子类别中的州名单。

但是，当我克隆下拉列表并在类别中选择其他国家/地区时，我仍然会获得之前所选国家/地区的过时值。我分享了截图。在选择印度作为选定值时，我一直将美国的状态作为子类别。

这是我的代码：

<body>
<form id="form1" runat="server">
    <div style="float: left;">
        <input type="button" id="btnClone" value="Clone Dropdown" />
    </div>
    <br />
    <br />
    <table>
        <tr>
            <td>
                <div>Category:</div>
            </td>
            <td>
                <div style="float: left">
                    <asp:DropDownList ID="ddlCountryList" runat="server" class="ddlCountryClass"></asp:DropDownList>
                </div>
            </td>
            <td>
                <div>Sub Category:</div>
            </td>
            <td>
                <div style="float: left">
                    <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">
    // Clones the Category and the subcategory dropdown lists
    $('#btnClone').click(function () {
        $('select.ddlCountryClass:eq(0)').clone();
        var original = $('select.ddlCountryClass:eq(0)');
        var allSelects = $('select.ddlCountryClass');
        clone = original.clone();
        $('#target').append($('<span>').text('Category:'));
        $('#target').append(clone).append('<br /><br /><br />');

        $('select.ddlStateClass:eq(0)').clone();
        var original = $('select.ddlStateClass:eq(0)');
        var allSelects = $('select.ddlStateClass');
        clone = original.clone();
        $('#target2').append($('<span>').text('SubCategory:'));
        $('#target2').append(clone).append('<br /><br /><br />');
    });
    //Fetches subcategory values based on the Category dropdown
    $(function () {
        $('#ddlStateList').attr('disabled', 'disabled');
        $('#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>

作为jquery的新手，我知道如何达到要求。请分享您的想法！

谢谢！

Answer 1

您需要将clone()更改为clone(true)，这样才会复制事件处理程序

一个布尔值，指示是否应将事件处理程序与元素一起复制。从jQuery 1.4开始，元素数据也将被复制。

这传递：

clone = original.clone()

到此：

clone = original.clone(true)

在克隆下拉列表及其级联下拉列表时，级联下拉列表未加载相关数据

1 个答案: