July 22, 201115 yr any idea why this is not working <!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" /> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#div1').hide(); $('#div2').hide(); $('#div3').hide(); $("#myselect").change(function(){ $("#" + this.value).show().siblings().hide(); }); </script> </head> <body> <select name="myselect" id="myselect" class="something"> <option value="0">Select...</option> <option value="111">First Option</option> <option value="222">Second Option</option> <option value="333">Third Option</option> </select> <div id="div0">This is the default div, for the "select" option</div> <div id="div1">This is the div for the first option</div> <div id="div2">This is the div for the second option</div> <div id="div3">This is the div for the third option</div> </body> </html>
July 22, 201115 yr any idea why this is not working <!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" /> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#div1').hide(); $('#div2').hide(); $('#div3').hide(); $("#myselect").change(function(){ $("#" + this.value).show().siblings(). hide(); }); </script> </head> <body> <select name="myselect" id="myselect" class="something"> <option value="0">Select...</option> <option value="111">First Option</option> <option value="222">Second Option</option> <option value="333">Third Option</option> </select> <div id="div0">This is the default div, for the "select" option</div> <div id="div1">This is the div for the first option</div> <div id="div2">This is the div for the second option</div> <div id="div3">This is the div for the third option</div> </body> </html>
July 22, 201115 yr Install Firebug and it will tell you why it's not working, but I don't understand your 'value' and div naming, it's never going to work. I changed it thusly: <!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" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".option").not("#div0").hide(); $("#myselect").change(function(){ $option = "#" + this.value; $(".option").not($option).hide(); $($option).show(); }); }); </script> </head> <body> <select name="myselect" id="myselect" class="something"> <option value="div0">Select...</option> <option value="div1">First Option</option> <option value="div2">Second Option</option> <option value="div3">Third Option</option> </select> <div id="div0" class="option">This is the default div, for the "select" option</div> <div id="div1" class="option">This is the div for the first option</div> <div id="div2" class="option">This is the div for the second option</div> <div id="div3" class="option">This is the div for the third option</div> </body> </html>
July 23, 201115 yr any idea why this is not working <!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" /> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#div1').hide(); $('#div2').hide(); $('#div3').hide(); $("#myselect").change(function(){ $("#" + this.value).show().siblings().hide(); }); </script> </head> <body> <select name="myselect" id="myselect" class="something"> <option value="0">Select...</option> <option value="111">First Option</option> <option value="222">Second Option</option> <option value="333">Third Option</option> </select> <div id="div0">This is the default div, for the "select" option</div> <div id="div1">This is the div for the first option</div> <div id="div2">This is the div for the second option</div> <div id="div3">This is the div for the third option</div> </body> </html>
July 23, 201115 yr i think its not correct .... Regards, web development company "][/url] Edited July 23, 201115 yr by ShaMelissa
Create an account or sign in to comment