mraza Posted August 28, 2010 Share Posted August 28, 2010 hi i hv a javascript what it dos is if i select an option it will show related div below, here is code <script type="text/javascript"> // <![CDATA[ function display(obj,id1) { txt = obj.options[obj.selectedIndex].value; document.getElementById(id1).style.display = 'none'; if ( txt.match(id1) ) { document.getElementById(id1).style.display = 'block'; } } // ]]> </script> <select name="type" onchange="display(this,'first');"> <option>Please select:</option> <option value="first">First</option> <option value="second">Second</option> <option value="third">third</option> <option value="fourth">fourth</option> </select><br /> <div id="first" style="display: none;"> show first <input name="going" type="text" id="" size="80"> </div> now what i need is if i selecd Second it will display the next div with id second and hide others, so i can have multiple divs like this, above code is working only for first div. <div id="first" style="display: none;"> show first <input name="going" type="text" id="" size="80"> </div> <div id="second" style="display: none;"> show second <input name="going" type="text" id="" size="80"> </div> <div id="third" style="display: none;"> show third <input name="going" type="text" id="" size="80"> </div> //and so on please any idea how can i do that. Thanks Quote Link to comment Share on other sites More sharing options...
mraza Posted August 28, 2010 Author Share Posted August 28, 2010 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript"> // <![CDATA[ function display(obj,id1,id2,id3) { txt = obj.options[obj.selectedIndex].value; document.getElementById(id1).style.display = 'none'; document.getElementById(id2).style.display = 'none'; document.getElementById(id3).style.display = 'none'; if ( txt.match(id1) ) { document.getElementById(id1).style.display = 'block'; } if ( txt.match(id2) ) { document.getElementById(id2).style.display = 'block'; } if ( txt.match(id3) ) { document.getElementById(id3).style.display = 'block'; } } // ]]> </script> <style type="text/css"> #id1 { /* The id does not have to match the above script */ position:relative; display: none; } #id2 { position:relative; display: none; } #id3 { position:relative; display: none; } </style> </head> <body> <select name="source" onchange="display(this,'id1','id2','id3');"> <option class="highlight">Select Heading:</option> <option value="id1">One</option> <option value="id2">Two</option> <option value="id3">Three</option> </select> <div id="id1"> <table width="100%" cellspacing="2" cellpadding="2"> <tr> <td align="right">first: </td> <td><input type="text" name="url" /></td> </tr> </table> </div> <div id="id2"> <table width="100%" cellspacing="2" cellpadding="2"> <tr> <td align="right">second: </td> <td><input type="text" name="url" /></td> </tr> </table> </div> <div id="id3"> <table width="100%" cellspacing="2" cellpadding="2"> <tr> <td align="right">third: </td> <td><input type="text" name="url" /></td> </tr> </table> </div> </body> </html> SOLVED Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.