How do I show/hide an option in the select box?

[manishjain]

Hi
I have a couple of select boxes (multiple). The options are shown in a tree
like fashion, sub options are indented.
I am providing buttons to move selected option from list 1 to 2 and vice
versa.
But this destroys the tree structure, when I move back the option, I cannot
restore it.
Instead of moving the options, I would like to hide / show options, so that
I have a copy of list 1 in list 2 (all hidden). Now if I move an item from
list 1 to 2, then it is hidden in 1 and shown in 2. Vice versa happens for
list 2.
(I am already using "value" to store unique codes, so cannot use that to
reorder)

I am enclosing an example list in which suboptions are shown in red.

How do I show/hide an option in the select box?

Thanks
Manish
-----------------------

<select size="4" name="D1" multiple>
<option value="Option Number 1">Option Number 1</option>
<option value="Sub Option Number 1" style="color:
#FF0000">&nbsp;&nbsp;Sub Option Number 1</option>
<option value="Sub Option Number 2" style="color:
#FF0000">&nbsp;&nbsp;Sub Option Number 2</option>
<option value="Option Number 2">Option Number 2</option>
<option value="Option Number 3">Option Number 3</option>
<option value="Sub Option Number 1" style="color: #FF0000">Sub Option
Number 1</option>
</select>

[manishjain]

The HTML changed in my post.....Does not show indentation



+-----------------+ +-----------------+
|Option1 | +------+ | |
| S. Option 1 | | >> | | |
| S. Option 2 | +------+ | |
|Option 2 | +------+ | |
| S. Option1 | | << | | |
| | +------+ | |
+-----------------+ +-----------------+