SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
Hybrid View
-
Mar 21, 2007, 08:50 #1
- Join Date
- Feb 2005
- Location
- London, UK
- Posts
- 422
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
load list in drop down with tickbox
hi, ive made a simple little page in frontpage to illustrate this request..
i want to load a list inside a drop down if a checkbox is ticked..
have a look at the picture here..
http://www.londonheathrowcars.com/showlist.jpg
basically imagine the lists contain the following..
List 1
Jim
Jon
List 2
Lee
Larry
List 3
Jane
Jess
when list one checkbox is ticked.. the drop down holds the list 1 values.. and so on..
only one list can be displayed in the drop down at a time..
of course when the items are in the list.. they would need to be selectable and active to be used in future form tasks..
if someone can produce a simple script that can accomplish this i would be very grateful.. here is the basic html behind the page..
thanks..
Code:<html> <head> <meta http-equiv="Content-Language" content="en-gb"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>New Page 1</title> </head> <body> <p><input type="checkbox" name="C1" value="ON"> List 1 <br> <input type="checkbox" name="C2" value="ON"> List 2 <br> <input type="checkbox" name="C3" value="ON"> List 3</p> <p><select size="1" name="D1" style="width: 150"> <option selected>Select List</option> </select></p> </body> </html>
-
Mar 21, 2007, 11:04 #2
- Join Date
- Nov 2004
- Location
- Nelson BC
- Posts
- 2,310
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
only one list can be displayed in the drop down at a time
Here's 1 way of doing it:
Code:<html> <head> <title>Loading list dynamically</title> <script type="text/javascript"> // an array to hold the contents of all lists var lists = [ ["C1","Jim"], ["C1","Jon"], ["C2","Lee"], ["C2","Larry"], ["C3","Jane"], ["C3","Jess"] ]; // onclick handler for radio buttons function switchList() { var listId = this.value; // get rid of current items in list var list = document.getElementById("theList"); while (list.options.length > 0) { list.options.remove(0); } var opt = new Option(); opt.text = "Choose a person"; opt.selected = true; list.options.add(opt); for (var i=0; i < lists.length; i++) { if (lists[i][0] == listId) { var opt = new Option(); opt.value = lists[i][1]; opt.text = lists[i][1]; list.options.add(opt); } } } // add onclick handler to radio buttons window.onload = function () { var inps = document.getElementsByTagName("input"); for (var i=0; i < inps.length; i++) { if (inps[i].type.toLowerCase()== "radio") { inps[i].onclick = switchList; } } } </script> </head> <body> <p> <input type="radio" name="chooseList" value="C1"> List 1 <br> <input type="radio" name="chooseList" value="C2"> List 2 <br> <input type="radio" name="chooseList" value="C3"> List 3 </p> <p> <select id="theList" size="1" name="D1" style="width: 150"> <option selected>Select List</option> </select> </p> </body> </html>
-
Mar 21, 2007, 11:46 #3
- Join Date
- Feb 2005
- Location
- London, UK
- Posts
- 422
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
it doesnt seem to work in firefox
-
Mar 21, 2007, 12:00 #4
- Join Date
- Nov 2004
- Location
- Nelson BC
- Posts
- 2,310
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Oops, lets change
list.options.remove(0);
to
list.removeChild(list.options[0]);
-
Mar 21, 2007, 12:43 #5
- Join Date
- Feb 2005
- Location
- London, UK
- Posts
- 422
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
yes that has done it..
so can the item that is selected in the drop down still be used..
eg
if you choose list 1..
and the drop down has
Jim
Jon
those will be the items that are displayed in the drop down.. but will they also register as the value of that drop down..
so when the submit button is pressed.. that item will be the option chosen and the value to be used in the form..?
cos usually specify both like..
<option value="Jim">Jim
...
or something like that.
-
Mar 21, 2007, 12:48 #6
- Join Date
- Nov 2004
- Location
- Nelson BC
- Posts
- 2,310
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Yes, when it creates new options it assigns the name to both the value and the text properties so when you submit it will send the value correctly to the server.
Bookmarks