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>
Bookmarks