load list in drop down with tickbox

**antonyx** · Mar 21, 2007, 08:50

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>

**jimfraser** · Mar 21, 2007, 11:04

only one list can be displayed in the drop down at a time

Then I suggest you use Radio Buttons and not Checkboxes.

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>

**antonyx** · Mar 21, 2007, 11:46

it doesnt seem to work in firefox

**jimfraser** · Mar 21, 2007, 12:00

Oops, lets change
list.options.remove(0);
to
list.removeChild(list.options[0]);

**antonyx** · Mar 21, 2007, 12:43

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.

**jimfraser** · Mar 21, 2007, 12:48

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.

The SitePoint Forums have moved.

User Tag List

Thread: load list in drop down with tickbox

Thread Tools

Display

Hybrid View

load list in drop down with tickbox

Bookmarks

Bookmarks

Posting Permissions