I need to populate a drop down list (HTML <select></select> ) using checkboxes. I tried to display such a list using the <div></div> and apply some styles on the JSP page, but it displays a list similar to the list. Below is the code on the JSP page along with Javascript, which simply warns the list of languages that were checked when you clicked the button on the page only.
<%@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 simply displays a list of languages, as shown in the following screenshot.
I need this list of languages to appear as a drop-down list (and not as a list). How can i do this?
source share