July 21, 201115 yr I would like to show a second select box, depending on what value is chosen in the first. How do I go about this? I have never used javascript or php so if this is a bit of a silly question, please educate me! Thanks in advance!
July 22, 201115 yr hello there me too not an expert in javascript but i have managed to found a code for you may be some expert here can help u more <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Simple Two Col</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <script type="text/javascript"> function show(obj) { no = obj.options[obj.selectedIndex].value; count = obj.options.length; for(i=1;i<=count;i++) document.getElementById('SkiDiv'+i).style.display = 'none'; if(no>0) document.getElementById('SkiDiv'+no).style.display = 'block'; } </script> <script type="text/javascript"> function show2(obj) { no = obj.options[obj.selectedIndex].value; count = obj.options.length; for(i=1;i<=count;i++) document.getElementById('SkiDi'+i).style.display = 'none'; if(no>0) document.getElementById('SkiDi'+no).style.display = 'block'; } </script> <form name="myForm"> <select onchange="show(this)"> <option value="1">Chronic 177</option> <option value="2">Chronic 172</option> <option value="3">Chronic 167</option> <option value="4">Chronic 157</option> </select> </form> <div id="SkiDiv1" style="display:block"> <form name="myForm2"> <select onchange="show2(this)"> <option value="1">Chronic 177</option> <option value="2">Chronic 172</option> <option value="3">Chronic 167</option> <option value="4">Chronic 157</option> </select> </form> </div> <div id="SkiDiv2" style="display:none">tip/waist/tail mm: 110-80-103 <br> sidecut r. m: 18.0m avg<br> tip/tail height mm: 56/56 mm <br> running surface mm: 1384mm <br> stance back from center mm: 64mm</div> <div id="SkiDiv3" style="display:none">tip/waist/tail mm: 110-80-103 <br> sidecut r. m: 16.5m avg<br> tip/tail height mm: 56/56 mm <br> running surface mm: 1335mm <br> stance back from center mm: 62mm</div> <div id="SkiDiv4" style="display:none">tip/waist/tail mm: 110-80-103 <br> sidecut r. m: 16.5m avg<br> tip/tail height mm: 56/56 mm <br> running surface mm: 1335mm <br> stance back from center mm: 62mm</div> <div id="SkiDi1" style="display:none">This is 1</div> <div id="SkiDi2" style="display:none">This is 2</div> <div id="SkiDi3" style="display:none">This is 3</div> <div id="SkiDi4" style="display:none">This is 4</div> </body> </html> Edited July 22, 201115 yr by sash_oo7
July 22, 201115 yr Author Thanks sash, that looks like what I need. I will need some help with this though. Which values would I change? Will this work with showing a large amount of pictures aswell?
July 22, 201115 yr I would like to show a second select box, depending on what value is chosen in the first. How do I go about this? I have never used javascript or php so if this is a bit of a silly question, please educate me! Thanks in advance! yes it will work for images too <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Simple Two Col</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <script type="text/javascript"> function show(obj) { no = obj.options[obj.selectedIndex].value; count = obj.options.length; for(i=1;i<=count;i++) document.getElementById('SkiDiv'+i).style.display = 'none'; if(no>0) document.getElementById('SkiDiv'+no).style.display = 'block'; } </script> <script type="text/javascript"> function show2(obj) { no = obj.options[obj.selectedIndex].value; count = obj.options.length; for(i=1;i<=count;i++) document.getElementById('SkiDi'+i).style.display = 'none'; if(no>0) document.getElementById('SkiDi'+no).style.display = 'block'; } </script> <form name="myForm"> <select onchange="show(this)"> <option value="1">Chronic 177</option> <option value="2">Chronic 172</option> <option value="3">Chronic 167</option> <option value="4">Chronic 157</option> </select> </form> <div id="SkiDiv1" style="display:block"> <form name="myForm2"> <select onchange="show2(this)"> <option value="1">Chronic 177</option> <option value="2">Chronic 172</option> <option value="3">Chronic 167</option> <option value="4">Chronic 157</option> </select> </form> </div> <div id="SkiDiv2" style="display:none">tip/waist/tail mm: 110-80-103 <br> sidecut r. m: 18.0m avg<br> tip/tail height mm: 56/56 mm <br> running surface mm: 1384mm <br> stance back from center mm: 64mm</div> <div id="SkiDiv3" style="display:none">tip/waist/tail mm: 110-80-103 <br> sidecut r. m: 16.5m avg<br> tip/tail height mm: 56/56 mm <br> running surface mm: 1335mm <br> stance back from center mm: 62mm</div> <div id="SkiDiv4" style="display:none">tip/waist/tail mm: 110-80-103 <br> sidecut r. m: 16.5m avg<br> tip/tail height mm: 56/56 mm <br> running surface mm: 1335mm <br> stance back from center mm: 62mm</div> <div id="SkiDi1" style="display:none">This is 1</div> <div id="SkiDi2" style="display:none">This is 2</div> <div id="SkiDi3" style="display:none">This is 3</div> <div id="SkiDi4" style="display:none"><img src="angry.gif" alt="Angry face" /></div> </body> </html> just replace the text within <div id ="SkiDi4"></div> or <div id ="SkiDi3"></div> or<div id ="SkiDiv4"></div> or <div id ="SkiDi3"></div> with the image tag <img src="angry.gif" alt="Angry face" /> please note here you have to use your image path and name also you can add more divs as you like <div id ="SkiDi4"><div id ="SkiDi5"></div> <div id ="SkiDi6"></div> ......and so on hope you can understand Edited July 22, 201115 yr by sash_oo7
Create an account or sign in to comment