Question

I have some code that grabs the first select on the page and clones it so that I can reset it later on if needed.

mySelect = jQuery('select').get(0);
origSelect = jQuery(mySelect).clone();

jQuery(mySelect).change(function(){
   //some code
}

When I fire the code to reset the select with:

jQuery(mySelect).replaceWith(origSelect);

The onChange function stops working. I’ve determined that it’s because it is now referred to as origSelect and responds to onChanges for that name. Do I have any options here for replacing the content of mySelect with the content of origSelect without changing the name it’s referred to by?

Answer 1

Pass a parameter true to the clone method.

origSelect = jQuery(mySelect).clone(true); //This will clone the select with data and events

or replace the innerHTMl of origSelect with that of mySelect.

jQuery(origSelect).html(jQuery(mySelect).html());