如何使下拉的克隆与数据绑定它吗？

问题描述

我有一个 DIV 其中包含与绑定到它和的输入键入文本日期选择器和一个数据AA下拉文本框。我想使 DIV 的克隆与克隆 ID C $ C>，输入型日期选择器，文本框和DropDownList的并绑定数据克隆下拉。我怎样才能做到这一点？

我用下面的code将其克隆它改变DIV而不是它的子元素和克隆的输入类型文本日期选取器被禁用。该ID

\r

\r

VAR toAddCloneCount = 0;\r
        \r
功能AddDestination（）{\r
    VAR克隆= $（＃TOADD）的克隆（真）。\r
    clone.show（）;\r
    clone.attr（'身份证'，'TOADD'+ toAddCloneCount ++）insertAfter（＃TOADD）;\r
    clone.find（＃天），ATTR（'身份证'，'天'+ toAddCloneCount）。\r
    clone.appendTo（＃目的地）;\r
}

\r

＆LT; D​​IV ID =目的地＆GT;\r
    ＆LT; D​​IV ID =TOADD＆GT;\r
        ＆LT;表样式=宽度：100％;＆GT;\r
            ＆所述; TR＆GT;\r
                ＆所述; TD类=自动美丽人生＆gt;至＆下; / TD＆GT;\r
                ＆所述; TD＆GT;\r
                    ＆LT; ASP：DropDownList的ID =dropDownList2=服务器的onchange =CheckCity（）DataValueField =CityIdDataTextField =CITYNAMEHEIGHT =100％WIDTH =95％＆GT;＆LT; / ASP ：DropDownList的＆GT;\r
                ＆LT; / TD＆GT;\r
                ＆LT; TD＆GT;天能保持＆LT; / TD＆GT;\r
                ＆所述; TD＆GT;\r
                    ＆LT; ASP：文本框ID =天WIDTH =30％HEIGHT =100％安其preSS =返回false的onkeydown =返回false的TextMode =号码最小=1RUNAT = 服务器文本=1＆GT;＆LT; / ASP：文本框＆GT;\r
                ＆LT; / TD＆GT;\r
                ＆所述; TD＆GT;\r
                    ＆所述p为H.;\r
                        日期：\r
                        ＆LT;输入类型=文本级=getCurrentDateID =TODATE安其preSS =返回false的onkeydown =返回false/＆GT;\r
                    ＆所述; / P＆GT;\r
                ＆LT; / TD＆GT;\r
                ＆所述; TD＆GT;\r
                    ＆LT; ASP：LinkBut​​ton的ID =LinkBut​​ton2的OnClientClick =AddDestination（）;返回false;的CssClass =divshow=服务器＆GT; +新增＆LT; / ASP：LinkBut​​ton的＆GT;\r
                ＆LT; / TD＆GT;\r
            ＆LT; / TR＆GT;\r
        ＆LT; /表＆gt;\r
    ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

解决方案

下面是一个克隆机制，克隆事件以及

请注意，您在使用ASP标记在你的榜样，你应该在你的例子是使用HTML标签：

点击运行和检查结果的HTML。

此方法presented这里克隆所有客户端的事件，则可能是事件处理上code后面的问题，您需要检查事件源以执行服务器上的正确动作。

  //原附加数据元素
变量$ ELEM = $（#destinations）。数据（改编，[1]），
    // withDataAndEvents（默认：false）类型：Boolean
    克隆= $ elem.clone（真）
    //深拷贝prevent数据共享
    。数据（改编，$ .extend（[]，$ elem.data（改编）））;cloned.attr（ID，cloned.attr（ID）+_cloned）;
cloned.find（*）。每个（函数（）{
    如果（$（本）.attr（ID）=不确定和放大器;！＆安培; $（本）.attr（ID）长度的方式＆gt; 0）
    {
        $（本）.attr（ID，$（本）.attr（ID）+_cloned）;
    }
}）;
的console.log（复制）;
克隆prependTo（包装）。
 

I have a div which contains a a dropdown with data bound to it and an input type text datepicker and a textbox. I want to make a clone of the div with a new id of clone, input type date picker, textbox and dropdownlist and bound data to cloned dropdown. How can I do this?

I'm using the below code it cloning it changing the id of div but not its child elements and the cloned input type text date picker gets disabled.

var toAddCloneCount = 0;

function AddDestination() {
    var clone = $("#toAdd").clone(true);
    clone.show();
    clone.attr('id', 'toAdd' + toAddCloneCount++).insertAfter("#toAdd");
    clone.find("#days").attr('id', 'days' + toAddCloneCount);
    clone.appendTo("#destinations");
}

<div id="destinations">
    <div id="toAdd">
        <table style="width: 100%;">
            <tr>
                <td class="auto-style8">To </td>
                <td>
                    <asp:DropDownList ID="dropDownList2" runat="server" onchange="CheckCity()" DataValueField="CityId" DataTextField="CityName" Height="100%" Width="95%"></asp:DropDownList>
                </td>
                <td>Days to Stay</td>
                <td>
                    <asp:TextBox ID="days" Width="30%" Height="100%"  onkeypress="return false" onKeyDown="return false" TextMode="Number" Min="1"  runat="server" Text="1"></asp:TextBox>
                </td>
                <td>
                    <p>
                        Date:
                        <input type="text" class="getCurrentDate"  id="toDate" onkeypress="return false" onkeydown="return false" />
                    </p>
                </td>
                <td>
                    <asp:LinkButton ID="LinkButton2" OnClientClick="AddDestination(); return false;" CssClass="divshow" runat="server">+Add</asp:LinkButton>
                </td>
            </tr>
        </table>
    </div>
</div>

解决方案

Here is a clone mechanism, cloning events as well http://jsfiddle.net/dg30gj27/.

Note, you are using asp tags in your example, you should use HTML tags in your example as:http://code.runnable.com/UjB_wxmQpvw8AAAw/asp-net-how-to-use-dropdownlistclick on run and inspect the resulted Html.

This method presented here clone all client events, you may have problems with events handling on code behind, you need to check event source in order to perform the correct action on server.

// Original element with attached data
var $elem = $( "#destinations" ).data( "arr", [ 1 ] ),
    //withDataAndEvents (default: false) Type: Boolean"
    cloned = $elem.clone( true )
    // Deep copy to prevent data sharing
    .data( "arr", $.extend( [], $elem.data( "arr" ) ) );

cloned.attr("id", cloned.attr("id") + "_cloned");
cloned.find( "*" ).each(function(){
    if ($(this).attr("id") != undefined && $(this).attr("id").length > 0)
    {
        $(this).attr("id", $(this).attr("id") + "_cloned");
    }
});
console.log(cloned);
cloned.prependTo(".wrapper");

这篇关于如何使下拉的克隆与数据绑定它吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！