View Full Version : Div show hide on option selected in Dropdown

04-20-2010, 12:58 PM
Hello Friends I want to show hide the div by selecting the option in Dropdown I tried lot by google search but somehow not getting how to do it please request you to help me since this is the best place where I got all solution to my problem

My source code looks like this

<select size="1">
<option selected="selected">option 1</option>
<option>option 2</option>
<option>option 3</option>

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

Please help me on urgent basis

04-20-2010, 01:03 PM
by default I want to show the div1 first

04-20-2010, 02:04 PM
You could use a javascript 'onselect' command and then change the div styles accordingly adding display: none; as appropriate.

04-20-2010, 02:06 PM
please if u dont mind can u explain in details

04-20-2010, 05:55 PM
Look into the DOM, getelementbyid

04-20-2010, 08:33 PM
I am very bad in javascript infact learning it so pls can u tell me how to do this

04-20-2010, 09:12 PM
Check this out:


I found it very helpful when I needed something like it.

04-21-2010, 08:02 AM
This is what I have tried but it seems to be working only in firefox

<script type="text/javascript"><!--
function divone(id) {
document.getElementById('one').style.display='bloc k';
document.getElementById('two').style.display='none ';
document.getElementById('three').style.display='no ne';
function divtwo(id) {
document.getElementById('one').style.display='none ';
document.getElementById('two').style.display='bloc k';
document.getElementById('three').style.display='no ne';
function divthree(id) {
document.getElementById('one').style.display='none ';
document.getElementById('two').style.display='none ';
document.getElementById('three').style.display='bl ock';

<select name="selectName">
<option onChange="divone();">first</option>
<option onChange="divtwo();">second</option>
<option onClick="divthree();">third</option>
<p id="one" >This is paragraph 1.</p>
<p id="two" style="display:none">This is paragraph 2.</p>
<p id="three" style="display:none" >This is paragraph 3.</p>