Menu
I need to populate a drop down list (HTML <select></select>) with check boxes. I have tried to display such a list using a <div></div> tag and applying some styles in JSP page but it displays a list like a list box. Below is the code in JSP page along with Javascript that just alerts the list of languages which have been checked when the only button on the page is clicked.
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Check box list</title>
</head>
<script type="text/javascript" language="javascript">
function selectCheckBox()
{
var total="";
for(var i=0; i < document.form.languages.length; i++)
{
if(document.form.languages[i].checked)
{
total +=document.form.languages[i].value + "\n";
}
}
if(total=="")
{
alert("select checkboxes");
}
else
{
alert("Selected Values are : \n"+total);
}
}
</script>
<body>
<form id="form" name="form" method="post" action="CheckBox.jsp">
<div style="overflow: auto; width: 100px; height: 80px; border: 1px solid #336699; padding-left: 5px">
<input type="checkbox" name="languages" value="English"> English<br>
<input type="checkbox" name="languages" value="Hindi"> Hindi<br>
<input type="checkbox" name="languages" value="Italian"> Italian<br>
<input type="checkbox" name="languages" value="Chinese"> Chinese<br>
<input type="checkbox" name="languages" value="Japanese"> Japanese<br>
<input type="checkbox" name="languages" value="German"> German<br>
</div>
<br/><input type="button" name="goto" onClick="selectCheckBox()"value="Check">
</form>
</body>
It just displays a list of languages as shown in the following snap shot.
What I need is to show this list of languages as a drop down (not as a list box). How can I do this?
935
DropDownList displays checkboxes to the left of each item when you set showCheckbox property to true. It allows you to select more than one item at a time from DropDownList. Popup list stays open until the user finishes selection. When you click on an item's text or checkbox then the checkbox checked status get change.
selectedOptions[index]. value you can get multiple selected values of multi-select dropdown.
Here is a link to a good library, http://code.google.com/p/dropdown-check-list/
With some nice test cases, http://dropdown-check-list.googlecode.com/svn/trunk/doc/ddcl-tests.html.
In addition, here are some examples, http://dropdown-check-list.googlecode.com/svn/trunk/doc/dropdownchecklist.html.
87
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
