Bootstrap select destroy removes the original selection from the DOM

Question

I am currently using the Bootstrap select plugin in one of my projects. I have a dynamically generated table in which there are selections that I then convert to bootstrap using the command:

_tr.find('select.selectpicker').selectpicker({ size: 10 }); 

Where _tr is the line where I added the selection items. This works fine, bootstrap selection is displayed and in firebug I still see the original select element.

Now each line has a button where it removes (destroys) the bootstrap selection. But it removes both the original choice and thats the poblem, because I still need the original choice to do something else.

I use the following command to destroy:

  $('select#begin' + _week + _day).selectpicker("destroy"); $('select#end' + _week + _day).selectpicker("destroy"); $('select#pause' + _week + _day).selectpicker("destroy"); 

In other plugins, if you use destroy, it again shows the original element. Is this a problem in the boostrap selection plugin, or is there another way to remove the boot selection and rename the original selection.

Answer 1

The solution, I edit the function of the plugin, destroying where instead of deleting the original element, I show it back:

 remove: function () { this.$newElement.remove(); this.$element.show(); // First it was this.$element.remove(); } 

Answer 2

I really appreciate your method, because it helps me a lot. But I found a way to improve my method without changing the source code. Here is what I did:

 jQuery.fn.selectpicker.Constructor.prototype.removeDiv = function () { this.$newElement.remove(); this.$element.show(); }; 

After that we can use:

 jQuery("#some_id").selectpicker("removeDiv");