JSFiddle - React, Tailwind, and code Playground
HTML
<select class="a">
<option value="1">One a</option>
<option value="2">Two</option>
</select>
<select class="b">
<option value="1">One b</option>
<option value="3">Three</option>
</select>
JavaScript
(function($){
$.fn.extend({detachOptions: function(o) {
var s = this;
return s.each(function(){
var d = s.data('selectOptions') || [];
s.find(o).each(function() {
d.push($(this).detach());
});
s.data('selectOptions', d);
});
}, attachOptions: function(o) {
var s = this;
return s.each(function(){
var d = s.data('selectOptions') || [];
for (var i in d) {
if (d[i].is(o)) {
s.append(d[i]);
console.log(d[i]);
// TODO: remove option from data array
}
}
});
}});
})(jQuery);
// example
$('select').detachOptions('[value=1]');
$('.b').attachOptions('[value=1]');