如何在HTML下拉列表中显示复选框？

问题描述：

我需要使用复选框填充下拉列表（HTML < select>< / select> ）。我试图使用< div>< / div> 标签显示这样的列表，并在JSP页面中应用一些样式，但它显示列表像列表框。下面是JSP页面中的代码以及Javascript，只是当点击页面上的唯一按钮时检查的语言列表。

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>

我需要的是将此语言列表显示为下拉列表（而不是列表框）。

What I need is to show this list of languages as a drop down (not as a list box). How can I do this?

答

这里是一个链接到一个好的库， http://code.google.com/p/dropdown-check-list/

Here is a link to a good library, http://code.google.com/p/dropdown-check-list/

有了一些不错的测试用例， http：//下拉列表。 googlecode.com/svn/trunk/doc/ddcl-tests.html 。

With some nice test cases, http://dropdown-check-list.googlecode.com/svn/trunk/doc/ddcl-tests.html.

此外，以下是一些示例，http://dropdown-check-list.googlecode.com/svn/trunk/doc/dropdownchecklist.html 。

In addition, here are some examples, http://dropdown-check-list.googlecode.com/svn/trunk/doc/dropdownchecklist.html.

如何在HTML下拉列表中显示复选框？

相关推荐