jQuery: Storing content of select-box to variable?

Question

I have a select field at my HTML page that is populated with a few default items. With the help of AJAX, I replace the content (options) in the select field with appropriate options.

How can I store the contents (options) of my select field into a variable and then load it into the select again? It would be helpful to be able to get back the default options of the select field.

Thanks!

Answer 1

My way would be using the jQuery's .data function to store the options html.

select_box = $("#select-box");
select_box.data("orginal_options", select_box.html());
select_box.html("<option value='1'>New Option</option>");

To resotre:

select_box.html(select_box.data("original_options"));

Of course these are the basic ideas, as I don't really know how's your logic. (And please correct me if I'm wrong).

Answer 2

You could use jQuery's .clone() method on the original elements in order to keep a reference to a copy of in the original state.

var $default_opts = $('#mySelect').children()//.clone();

I used jQuery's .children() here to keep it a little more generic in case you're using <optgroup> elements.

When it comes time to revert to the originals, you could do something like this:

$('#mySelect').empty().append( $default_opts.clone() );

This empties the <select> of its current content, and appends a clone of the defaults so that your copy is retained in its original state.

---

EDIT: I misread part of the question. You wouldn't need the first .clone().

Answer 3

If you want to restore the objects instead of the html()-string, you can use detach()

//remove options from select and hold them inside a variable
var defaults=$('select option').detach();

//clear select and restore the defaults
$('select').empty().append(defaults);

An example how to use it with replaceWith() :

<select id="target" size="3">
 <option>a
 <option>b
</select>
<input type="button" 
   value="replace"
   onclick="fx($('#target'),this)"
   />

<script  type='text/javascript'>
function fx(o,b)
{
 if(b.value==='replace')
 {
  o.data('defaults',$('option',o).replaceWith('<option>1</option><option>2</option>'));
  $(b).val('restore');
 }
 else
 {
  $(o).empty().append($(o).data('defaults'));
  $(b).val('replace');
 }
}
</script>

http://jsfiddle.net/doktormolle/Sgn72/