How to display checkboxes within HTML dropdown?

问题

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?

回答1:

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.

回答2:

I hope I'm not really late :)

Check this out: http://www.marghoobsuleman.com/jquery-image-dropdown

来源：https://stackoverflow.com/questions/9436488/how-to-display-checkboxes-within-html-dropdown

标签

javascript

jsp

checkbox