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 Link to comment https://forums.phpfreaks.com/topic/161105-solved-easy-question-please-help/ 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 Link to comment https://forums.phpfreaks.com/topic/161105-solved-easy-question-please-help/#findComment-850154 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) Link to comment https://forums.phpfreaks.com/topic/161105-solved-easy-question-please-help/#findComment-850177 Share on other sites More sharing options...
spires Posted June 5, 2009 Author Share Posted June 5, 2009 Thats excellent, Thank you so much Link to comment https://forums.phpfreaks.com/topic/161105-solved-easy-question-please-help/#findComment-850187 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.