How do I save and restore select options?
I have a report selection page with one select element. I have 44 options now but expect the list to grow. What we'd like to do is have a radio button for each category and a button for all.
My idea was to save each logical group of options into global variables in the document ready() function
- var allElems = save all options
var mixedElems = save 'Mixed' class options
var tbElems = save 'TB' class options
var qhElems = save 'QH' class options
var ptElems = save 'PT' class options
var apElems = save 'AP' class options
Then, using the radio buttion onclick event, pass the class name to a filterOptions function. That function would remove all options from the select and then restore only the class requested. Of course restore all options when the "all" button is checked.
- function filterOptions(elemClass) {
/*
Step 1.
Remove elems from id='targetReport'
Step 2.
if (elemClass=='All'){
Restore all classes
}
if (elemClass=='Mixed'){
Restore 'Mixed' class only
}
if (elemClass=='TB'){
Restore 'TB' class only
}
if (elemClass=='QH'){
Restore 'QH' class only
}
if (elemClass=='PT'){
Restore 'PT' class only
}
if (elemClass=='AP'){
Restore 'AP' class only
}
*/
}
I tried clone() and append(), as well as several similar ideas that I Googled. I'm new to jQuery and wasn't able to get any example to work.
Is this a logical approach, and is it possible?
Any assistance much appreciated.
Thank you, Lyndon