Javascript hide items from dropdown

I have a dropdown list with 24 items, the user can check a radio button and this will set it to onl开发者_JAVA百科y show 12. If they de-select it, the dropdown will show the 24 items as before.

I have it working to only show 12 items using

document.getElementById('theMenu').length = 12;

But then when I try to set it back to 24, the other 12 items are empty.

Am thinking I may need to store the values in a temp array of some sort, then just load these back into the dropdown menu? (Javascript only)

Thanks:)

Yes setting the length to 12 is destroying the second 12 values.

It may be benifical to put these elements in memory when the page is ready and not to manipulate that array (use it as a constant), populate another array with ones you need, create a method that takes an array and populates a drop down (you could hard-code the target array, or make the target Id another parameter).

Are you able to use the JQuery library? I would suggest so. It will most probably have some useful methods for manipulating <select>s.

Why not use jQuery to make it simpler?

You can store the values in an Array

var values = {1:one,2:two,3:three};

and then based on the checkbox value populate them

$.each(values , function(key,value) { 
  alert(value); 
       $('#drop').
          append($("<option></option>").
          attr("value",key).
          text(key)); 

});

What is the best way to add options to a select from an array with jQuery?