[thelist] Re: js/css show div based on onchange

Jono ox4dboy at comcast.net
Thu Oct 21 12:11:40 CDT 2004


On Oct 21, 2004, at 10:41 AM, Courtenay wrote:

> Yeah, but it breaks for no javascript.
> Also, tables are passe!  Yes, its a cheeky response, but here goes.
>

This worked for me a while back.
[+] Works on a lot of browsers, even NN4.
[+] short and sweet, but not a huge amount of flexability
[-] Not really slick CSS, uses tables which were designed for what I 
was doing.
[-] does not work with external style sheet.

<style type="text/css">
#dns2 div {display:none;}
</style>

<!--JavaScript for Pulldown -->

//this is the script that hides and shows from the pulldown menu
function show(which){
	m=document.getElementById("dns2");
	trig=m.getElementsByTagName("div").item(which).style.display;
	if (trig=="block") trig="none";
	else if (trig=="" || trig=="none") trig="block";
	m.getElementsByTagName("div").item(which).style.display=trig;
}

<!-- end JavaScript for Pulldown -->


<!-- H T M L Select Pulldown -->

<tr>
	<td><select name="whatever" onChange="javascript:show(0)">
		<option value="dns1" selected>Primary</option>
		<option value="dns2">Secondary</option>
		</select>
	</td>
</tr>

<!-- H T M L area that is revealed/hidden from pulldown -->

<div id="secondary">
	<table>
        <tr>
        	<td>...</td>
        </tr>
        <tr>
        	<td>...</td>
        </tr>
        	<td>...</td>
        	<td>...</td>
        	<td>...</td>
        	<td>...</td>
        </tr>
     </table>
</div>

<!-- End H T M L -->



More information about the thelist mailing list