Question

I have a <select> field on my HTML page that is populated with a few options. With the help of AJAX, I replace those options in the select field with more appropriate options.

How can I store the 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 in some cases.

Answer 1

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

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.