spires Posted June 6, 2009 Share Posted June 6, 2009 Hi guys I'm hoping that you will be able to help. I have a simple dropdown (select form), the dropdown contain 3 options each with it own value. However, each of the value needs to be broken up into two. This is going to be done by using a _ to separate the two sections. What I then need it to do, is to display the second section of the value in a DIV tag. I think I am 90% there, but can't work out the last part, which is placing the second section of the value in a DIV tag. Here's my code (Website Page - http://businessmobiles.com/comcalc/test.php): <script language="javascript"> function selBox1(selectbox) { var w = document.myform.mylist.selectedIndex; document.getElementById("div1").innerHTML = selectbox.value; } </script> </head> <body> <form name="myform" > <select name="mylist" onchange="selBox1(this);" id="mylist"> <option value="Text 1 _ Text A">Text 1</option> <option value="Text 2 _ Text B">Text 2</option> <option value="Text 3 _ Text C">Text 3</option> </select> </form> <br><br> <div id="div1"></div> </body> Thanks for your help. Link to comment https://forums.phpfreaks.com/topic/161163-solved-help-with-select-form-javascript/ Share on other sites More sharing options...
jxrd Posted June 6, 2009 Share Posted June 6, 2009 Like this? <script language="javascript"> function selBox1(selectbox) { var w = document.myform.mylist.selectedIndex; document.getElementById("div1").innerHTML = selectbox.value.split('_')[1]; } </script> </head> <body> <form name="myform" > <select name="mylist" onchange="selBox1(this);" id="mylist"> <option value="Text 1 _ Text A">Text 1</option> <option value="Text 2 _ Text B">Text 2</option> <option value="Text 3 _ Text C">Text 3</option> </select> </form> <br><br> <div id="div1"></div> </body> Link to comment https://forums.phpfreaks.com/topic/161163-solved-help-with-select-form-javascript/#findComment-850455 Share on other sites More sharing options...
spires Posted June 6, 2009 Author Share Posted June 6, 2009 Thats perfect. Thanks Link to comment https://forums.phpfreaks.com/topic/161163-solved-help-with-select-form-javascript/#findComment-850507 Share on other sites More sharing options...
spires Posted June 6, 2009 Author Share Posted June 6, 2009 Hi I now have another issue. I want to have two forms, one displays the text in DIV1 and the other displays the text in DIV2. However, at the moment, if I select a value from either dropdown, the value appears in both DIV1 & DIV2 Here the website: http://businessmobiles.com/comcalc/test.php Here the code: <script language="javascript"> function selBox1(selectbox) { var w = document.form1.product.selectedIndex; document.getElementById("div1").innerHTML = selectbox.value.split('_')[1]; var w1 = document.form1.itemComp.selectedIndex; document.getElementById("div2").innerHTML = selectbox.value.split('_')[1]; } </script> </head> <body> <form name="form1" > <select name="product" onchange="selBox1(this);" id="product"> <option value="Text 1 _ Text A">Text 1</option> <option value="Text 2 _ Text B">Text 2</option> <option value="Text 3 _ Text C">Text 3</option> </select> <select name="itemComp" onchange="selBox1(this);" id="itemComp"> <option value="Text 4 _ Text E">Text 4</option> <option value="Text 5 _ Text F">Text 5</option> <option value="Text 6 _ Text G">Text 6</option> </select> </form> <div id="div1"></div><div id="div2"></div> </body> Any help would be great Thanks Link to comment https://forums.phpfreaks.com/topic/161163-solved-help-with-select-form-javascript/#findComment-850511 Share on other sites More sharing options...
jxrd Posted June 6, 2009 Share Posted June 6, 2009 You mean like this? <script language="javascript"> function selBox1(selectbox, child) { var div = document.getElementById("div"); if(child == 'first') { div.firstChild.innerHTML = selectbox.value.split('_')[1]; } else if(child == 'last') { div.lastChild.innerHTML = selectbox.value.split('_')[1]; } } </script> </head> <body> <form name="form1" > <select name="product" onchange="selBox1(this, 'first');" id="product"> <option value="Text 1 _ Text A">Text 1</option> <option value="Text 2 _ Text B">Text 2</option> <option value="Text 3 _ Text C">Text 3</option> </select> <select name="itemComp" onchange="selBox1(this, 'last');" id="itemComp"> <option value="Text 4 _ Text E">Text 4</option> <option value="Text 5 _ Text F">Text 5</option> <option value="Text 6 _ Text G">Text 6</option> </select> </form> <div id="div"><span></span><span></span></div> </body> Link to comment https://forums.phpfreaks.com/topic/161163-solved-help-with-select-form-javascript/#findComment-850518 Share on other sites More sharing options...
spires Posted June 6, 2009 Author Share Posted June 6, 2009 Yes Thats exactly what I mean. Thank you so much Link to comment https://forums.phpfreaks.com/topic/161163-solved-help-with-select-form-javascript/#findComment-850526 Share on other sites More sharing options...
jxrd Posted June 6, 2009 Share Posted June 6, 2009 Lol np. Just remember not to leave white space in your div.... It really confused me when the children weren't being found properly... Link to comment https://forums.phpfreaks.com/topic/161163-solved-help-with-select-form-javascript/#findComment-850539 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.