ann Posted June 16, 2009 Share Posted June 16, 2009 Hi, I want the contents of a text box to change with the selection from a dropdown menu. The script below works, but only if I include the line marked <!--why do I need this-->. If I delete this line the page loads without error but I get document.getElementById("divSCO0") is null when I make a selection and no changing text. How can I get the script to work without the <!--why do I need this--> line? or Can I get divXXX not to display? I've got style="display:none" but it still shows! The number of select options and divs will vary with database content. Could the java script be written before I have the results of the database query? I guess I'd have to pass it both the total number of options and which option to display? Thanks for your time. <html> <head> <script type="text/javascript"> function checker(what){ document.getElementById("divSCO0").style.display = "none"; document.getElementById("divSCO1").style.display = "none"; document.getElementById("divSCO2").style.display = "none"; if (what==1) { document.getElementById("divSCO1").style.display = "block"; }else if (what==2) { document.getElementById("divSCO2").style.display = "block"; }else { document.getElementById("divSCO0").style.display = "block"; } } </script> </head> <body> Select <select name="DDselect" onchange="checker(this.value)"><option value="0" selected></option> <option value="1">1</option> <option value="2">2</option> <br><br> <div id="divXXX" style="display:none"><textarea name="XXX" id="XXX" rows="0" cols="0"></textarea></div><!--why do I need this--> <div id="divSCO0" style="display:block"><textarea name="SCO0" id="SCO0" rows="2" cols="30"></textarea></div> <div id="divSCO1" style="display:none"><textarea name="SCO1" id="SCO1" rows="2" cols="30">Selection one from the dropdown</textarea></div> <div id="divSCO2" style="display:none"><textarea name="SCO2" id="SCO2" rows="2" cols="30">Two selected</textarea></div> </body> </html> Quote Link to comment Share on other sites More sharing options...
ann Posted June 16, 2009 Author Share Posted June 16, 2009 Update I can get rid of the unwanted text box by changing the line to... <div id="divXXX" style="display:none"><input type=hidden></div><!--why do I need this--> But if you know the 'proper' solution to the problem I'd be grateful for the insight. Cheers Quote Link to comment Share on other sites More sharing options...
darkfreaks Posted June 16, 2009 Share Posted June 16, 2009 <select name="DDselect" onchange="checker(this.value)"><option value="0" selected></option> Should Be: <select name="DDselect" onchange="checker(this.value);"><option value="0" selected></option> Quote Link to comment Share on other sites More sharing options...
ann Posted June 17, 2009 Author Share Posted June 17, 2009 I'm sure your right but the real problem was I hadn't closed the select tag. A </select> after the last </option> sorts it out. Thanks for the help. 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.