Showing/hiding table on selection

hello all,
i got a selection tag which pulls values from DB to populate,i want to hide or show related div/table based on the selection. now i got two confusions. how can i know what is selected coz the option tag value is coming from DB, also i never work with show/hide thingy. how can i achieve it?

When an option is elected by the user, its value will be assigned to the <select> element. You can put an onchange event handler on the <select> which then show/hide the element referenced by the <select>'s value.

Post the generated html for your <select> element.

a example would be helpful? i mean showing and hiding of div. against the selected <option>, whereas option is like

<option value="<?=$sub_row['id']?>" <?=(in_array($sub_row['id'], $dealers_sub))?'selected':'';?>>

Here is the script.

<script language=“javascript”>
function showOptions(ele) {
var Option1 = document.getElementById(‘Option1’);
var Option2 = document.getElementById(‘Option2’);

        if(ele == "Option1") {
            Option1.style.display = 'block';
            Option2.style.display = 'none';

        }
        if(ele == "Option2") {
            Option1.style.display = 'none';
            Option2.style.display = 'block';
        }
        return false;

}
</script>

<select name=“myOptions” onchange=“javascript:showOptions(this.value);”>
<option value=“Option1”>Show Option 1</option>
<option value=“Option2”>Show Option2</option>
</select>

<div id=“Option1” style=“display:block”>
This is my Option1
</div>
<div id=“Option2” style=“display:none”>
This is my Option2
</div>



 <select name="sub[]" id="sub" multiple="multiple" size="9" onChange="showcheckbox();">                                                         <option value="1" >                             100                            </option>                                                         <option value="2" > 
                            200                            </option>                                                         <option value="3" selected> 300                            </option>                                                         <option value="4" > 400                            </option>                                                         <option value="5" >                             500                            </option> 
                                                        <option value="6" >Only                            </option>                                                         <option value="7" >                              Union Dealers                            </option>                                                         <option value="8" >                              Posting                            </option>                                                         <option value="9" > 
                             Posting                            </option>                                                       </select></td>

imo that’s a messy way to do it because if the number of options returned from the db changes then you have to edit your javascript to suit.

A better way could be to set up your javascript so that it doesn’t matter how many options there are in the <select>. You just take the curent value of the <select>, then hide all the relevant elements and then just show the selected element.

<select name="sub[]" id="sub" multiple="multiple" size="9" onChange="showcheckbox();"> 

ok, so your showcheckbox() first needs to hide all the show/hide elements. Then loop through the options (since you have multiple) and check if the option is selected. If it is then show the element referenced by the option’s value.

Post your javascript and we can try to help you get it working or there are lots of examples on google.