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?
