[jQuery] Structuring advice: cloning a set of dynamic dropdown menus
Hi there,
I have a table that looks like this:
The user can click the 'Add another category' link and another row is
inserted.
My issue is here: those two select boxes are linked, meaning that
depending on what is chosen from the first one, the options are
changed in the second one.
When I clone this row, the new cloned row doesn't work properly - the
first select box ('Publication') changes ALL of the 'Categories'
choices in the second column.
My HTML is structured so that the table row contains each of the
possible <select> elements, each given an ID that corresponds to an ID
number in the Publication <select>. For example, the Publication
dropdown HTML is:
<select name="publicationID" id="publicationID">
<option value="01" onClick="showSubMenu('0');"> Publication </
option>
<option value="21" onClick="showSubMenu('21');"> Student </option>
<option value="40" onClick="showSubMenu('40');"> Contract </option>
<option value="99" onClick="showSubMenu('99');"> All Publications </
option>
</select>
As a result, I have 4 hidden select boxes corresponding to each of
these Publication choices. Make sense?
I feel like there must be a better way to organise this - can anyone
advise me on how to do it? Above all, I can't seem to target the newly-
cloned select boxes without grabbing them all.
Thanks,
Matt