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. Quote Link to comment 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> Quote Link to comment Share on other sites More sharing options...
spires Posted June 6, 2009 Author Share Posted June 6, 2009 Thats perfect. Thanks Quote Link to comment 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 Quote Link to comment 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> Quote Link to comment 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 Quote Link to comment 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... 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.