[jQuery] Replacing elements while retaining attributes
Hello all,
I'm trying to dynamically configure the options in a <select> element
based upon selections in a series of radio buttons. My first
inclination was to apply a class to all of the <option>'s matching the
value of the checkbox <input>, and to then apply the
disabled="disabled" attribute too all of the matching <option>
elements. If only it were that easy.. IE doesn't support that
attribute, and all the workarounds are a bit silly (using CSS to color
an option, and doing various things to prevent the option from being
selected). I could of course load in options via ajax, or have a
series of <select> elements that I toggle on and off, but I'm trying
to allow this to gracefully degrade (planning on doing some serverside
validation to check if the combo selected is valid).
So my next option, as I see it, is to replace the <option> elements
with the relevant classes with a bogus invalid element, like
<disabled>. But once another <input> is selected I need to reset the
menu and restore the <disabled> options before I can toggle the newly
irrelevant options. It's also important that I not move the options
around when I turn them back into <option> elements. replaceAll/With
does this of course, but it wipes out my attributes in the process. Is
there a way to do this without that happening, outside of storing the
attributes as variables before removing and replacing these elements,
and then setting the attributes back one by one?
I'm more of a designer than a developer, so I may be missing something
here. I've thought about arrays, but I haven't really got into that
yet. If that's the road I need to be going down just validate that for
me and I'll do my best to figure it out =) I'm thinking the caveat
there would be I wouldn't be able to place my elements back in their
original order if I moved the elements into an array and them dumped
them back in the <select>.
Thanks for any help!