javascript - 需要帮助形成 JQuery 来克隆 <select> 元素并插入到父 div 中

Question

有多个相同的 div#DropDown ，如下面的 html 中具有相同的 id:

    <div class="DropDown">

       <div class ="ListAndLink">
   <select id="mydropdown" name="mydropdown">
   <option selected="selected" value="18">Blah</option>
    <option value="0">Do not include</option>
    </select> <a class="clone"> + Add</a>
       </div>    

    </div>

以下 jquery(使用 1.5.1)在一定程度上有效，但它所做的是克隆整个 <div class="DropDown">并在其后插入另一个，克隆上的“+添加”链接也不起作用。在原始文件上按 +Add 将使已克隆的内容加倍/2 倍，包括原始文件。

   $(".clone").click(function () {
        var clone = $(this).parent().clone();
        $(this).parent().append(clone);

        OnSuccess(mydata); // <- calculates total for all selected items 


    });

我想要得到的是这样的:(没有“+Add”并用“-Del”代替)保留“选择性”并不重要。按“-Del”应该删除 <select>它靠近的元素(但是当按下克隆元素时 ActionScript 似乎不会触发，就像它们不是 DOM 的一部分一样？):

    <div class="DropDown">

       <div class ="ListAndLink">
   <select id="mydropdown" name="mydropdown">
   <option selected="selected" value="18">Blah</option>
    <option value="0">Do not include</option>
    </select> <a class="clone"> + Add</a>
       </div>       

       <div class ="ListAndLink">
   <select id="mydropdown" name="mydropdown">
   <option selected="selected" value="18">Blah</option>
    <option value="0">Do not include</option>
    </select> <a class="Delete"> - Del</a>
       </div>   

    </div>

另外，我不知道如何准确地用文字表达它，但是有没有办法永久地，至少让所述浏览器窗口保留 Jquery 生成的 html，因为如果我按后退，它就会消失-按钮。我不确定是否会发生这种情况，因为 Jquery 生成的 html 不会保留在 DOM 中，因为服务器端在使用“后退”时不会覆盖页面内容，因为我知道这不是浏览器的工作方式，并且 HTML 保留在浏览器的内存中.

最重要的是，我需要现有的 javascript 选取克隆的元素， 假设我有一个 $('select').change(function () { OnSuccess(mydata); });适用于所有原始下拉列表的脚本，现在当我从克隆的下拉列表中选择不同的选项时，它不会触发!

谢谢..

Answer 1

http://jsfiddle.net/mqeN5/ 这就是您所需要的:

HTML

<select class='keep'>
    <option value='Keep this' selected>Keep This</option>
    <option value='Delete this'>Delete This</option>
</select>
<span class='add'>+Add</span>
<select class='delete'>
</select>
<span class='rem'>-Rem</span>

Javascript:

$('.add').click(function(){
    $('.keep option:selected').clone().appendTo('.delete').end().end().remove();
});
$('.rem').click(function(){
    $('.delete option:selected').clone().appendTo('.keep').end().end().remove();
});