There are multiple identical div#DropDown as in the below html with same 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>
     开发者_如何学JAVA  </div>    

    </div>

The following jquery (Using 1.5.1) works to adegree, but what it does is clone the entire <div class="DropDown"> and inserts another one after it, the "+Add" link on the clones does not work either. And pressing +Add on the original will double/2x whatever is already cloned, including the original.

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

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


    });

What I want to get is this: (Without "+Add" and in place of it "-Del") retaining "selectedness" is not important. Pressing the "-Del" should delete <select> element it is near (but action script when pressing on the cloned elements does not fire it seems, like they are not part of 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>

Also I don't know how to put it in words exactly, but is there a way to permanently, at least for the said browser window to retain the html that Jquery generates, because it all disappears if I press the back-button. I am not sure if this happens because the html generated by Jquery is not retained in DOM, because the server side does not override the page contents when using "back" as I understand it's not how browsers work and HTML is retained in memory of browser.

Most importantly, I need the cloned elements to be picked up by the existing javascript, say I have an $('select').change(function () { OnSuccess(mydata); }); script that works with all original dropdown lists , right now when I choose different option from the cloned drop down lists it does not fire!

Thanks..

http://jsfiddle.net/mqeN5/ This is what you need:

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();
});