spires Posted June 5, 2009 Share Posted June 5, 2009 Hi Guys I'm am new to Javascript. What I am trying to do should be easy but I can't work it out. All that I want to happen is; - Select option from dropdown list. - the value is then displayed in a DIV I need this to be done in JavaScript as I don't want to have to reload the page. Here is my code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Untitled Document</title> <script language="javascript"> function calculate() { var myDiv1 = document.getElementById("div1"); document.getElementById('div1').firstChild.data="getText"; } </script> </head> <body> <form name="form1" > <select name="getText" onchange="calculate();" id="getText"> <option value="Text 1">Text 1</option> <option value="Text 2">Text 2</option> <option value="Text 3">Text 3</option> </select> </form> <br><br> <div id="div1"></div> </body> </html> I'm completely stuck, your help would be great Thanks Quote Link to comment Share on other sites More sharing options...
spires Posted June 5, 2009 Author Share Posted June 5, 2009 I think I might be getting a bit closer. Any ideas? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Untitled Document</title> <script language="javascript"> function calculate() { var w = document.myform.mylist.selectedIndex; document.getElementById("div1").value=document.myform.mylist.options[w].text; } </script> </head> <body> <form name="myform" > <select name="mylist" onchange="calculate();" id="mylist"> <option value="Text 1">Text 1</option> <option value="Text 2">Text 2</option> <option value="Text 3">Text 3</option> </select> </form> <br><br> <div id="div1"></div> </body> </html> Thanks Quote Link to comment Share on other sites More sharing options...
Axeia Posted June 5, 2009 Share Posted June 5, 2009 f<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Untitled Document</title> <script language="javascript"> function calculate( selectbox ) { var w = document.myform.mylist.selectedIndex; document.getElementById("div1").innerHTML = selectbox.value; } </script> </head> <body> <form name="myform" > <select name="mylist" onchange="calculate(this);" id="mylist"> <option value="Text 1">Text 1</option> <option value="Text 2">Text 2</option> <option value="Text 3">Text 3</option> </select> </form> <br><br> <div id="div1"></div> </body> </html> Fixed. (Got lazy and used .innerHTML as changing TEXT is different in IE/the rest, .innerText / .textContent) Quote Link to comment Share on other sites More sharing options...
spires Posted June 5, 2009 Author Share Posted June 5, 2009 Thats excellent, Thank you so much 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.