Question

I’m getting data on pageload on the client side via json for 4 dropdownlists.

I need to be able to save the contents of whats inside the dropdownlists off to a variable for later use on the page.

You see, list2 is dependent on list1. So, when I pick a value in list1, i need to filter out the corresponding values in list 2.

Once this is done, I will replace the full contents of list2 with the filtered contents.

If a user needs to do a “do-over” I would simply move the full values to the drop down list again until it is filtered out once more.

Question is I want to make sure how do I save the values off properly (since they will be an id and text value) to just a var variable.

Going further, when I need to put either the full list back in the actual dropdownlist, what would be the jQuery syntax to do that?

For gathering the collection of values I find to filter that match, I assume I would just have a foreach loop, but how would I assign it to my filtered drop down list? It would basically be like adding values onto a dropdownlist in C# on the server side.

Thanks much…

Answer 1

You question is unclear, but if I’ve read it correctly, you need to save the current content of a <select/> to a variable, to use it latter on.

Take a look at the jQuery .clone()

---

See this working Fiddle Example! ^{shows the cloned option‘s being appended to a div}

Assuming this HTML:

<select id="foobar">
  <option value="1">01</option>
  <option value="2">02</option>
  <option value="3">03</option>
  <option value="4">04</option>
  <option value="5">05</option>
</select>

You can grab the select contents using:

$(function() {
  var $selectContents = $('#foobar option').clone();
});