I have 2 select boxes. Now, how the hell do I change options in the second box when the first one is switched to another option by the user?!!! thanks
javascript...
Collapse
X
-
javascript...
Tags: None -
-
-
Not the greatest solution, but I was bored so, here it is:
Code:<html> <head> <script type="text/javascript"> // hook up your options slaveArr1 = new Array("Slave option 1","Slave option 2","Slave option 3"); slaveArr2 = new Array("Another option 1","Another option 2","Another option 3"); // do the work function updateSlave(val) { var arr; if(val != "") // test empty value { // set values if(val == "1") arr = slaveArr1; else arr = slaveArr2; // reset slave resetSlave(); // populate options populateSlave(arr); } } // populates select field function populateSlave(arr) { for(i=0;i<arr.length;i++) { o = document.createElement("option"); o.setAttribute("value",arr[i]); o.appendChild( document.createTextNode( arr[i] ) ); document.getElementById("slave").appendChild(o); } } // kill options in slave select field function resetSlave() { while(document.getElementById("slave").childNodes.length > 0) document.getElementById("slave").removeChild( document.getElementById("slave").lastChild ); } </script> </head> <body> <form method="GET" action=""> <p>Select 1: <select name="master" onchange="updateSlave(this.value)"> <option value=""></option> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> </p> <p>Select 2: <select name="slave" id="slave"></select> </p> </form> </body> </html>Your post count means nothing.Comment
-
thanks for the link, but it doesn't seem to work... I mean it does load, I click to faq #237 and then on the first link ( http://tech.irt.org/articles/js042/index.htm ) but it doesn't work. Does it open for anyone? If so, can someone copy it here? thanksComment
-
thanks! I will test it outNot the greatest solution, but I was bored so, here it is:
Code:<html> <head> <script type="text/javascript"> // hook up your options slaveArr1 = new Array("Slave option 1","Slave option 2","Slave option 3"); slaveArr2 = new Array("Another option 1","Another option 2","Another option 3"); // do the work function updateSlave(val) { var arr; if(val != "") // test empty value { // set values if(val == "1") arr = slaveArr1; else arr = slaveArr2; // reset slave resetSlave(); // populate options populateSlave(arr); } } // populates select field function populateSlave(arr) { for(i=0;i<arr.length;i++) { o = document.createElement("option"); o.setAttribute("value",arr[i]); o.appendChild( document.createTextNode( arr[i] ) ); document.getElementById("slave").appendChild(o); } } // kill options in slave select field function resetSlave() { while(document.getElementById("slave").childNodes.length > 0) document.getElementById("slave").removeChild( document.getElementById("slave").lastChild ); } </script> </head> <body> <form method="GET" action=""> <p>Select 1: <select name="master" onchange="updateSlave(this.value)"> <option value=""></option> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> </p> <p>Select 2: <select name="slave" id="slave"></select> </p> </form> </body> </html>Comment
-
Try 1046.. Play around with it a bit.. It's not as difficult as it seems.thanks for the link, but it doesn't seem to work... I mean it does load, I click to faq #237 and then on the first link ( http://tech.irt.org/articles/js042/index.htm ) but it doesn't work. Does it open for anyone? If so, can someone copy it here? thanksComment


Comment