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

2024-02-24

我需要填充一个下拉列表(HTML<select></select>)带有复选框。我尝试使用显示这样的列表<div></div>标签并在JSP页面中应用一些样式,但它显示一个像列表框一样的列表。下面是 JSP 页面中的代码以及 Javascript,仅在单击页面上的唯一按钮时提​​醒已检查的语言列表。

<%@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>

它仅显示语言列表,如下面的快照所示。

我需要的是将此语言列表显示为下拉列表(而不是列表框)。我怎样才能做到这一点?


这是一个很好的图书馆的链接,http://code.google.com/p/dropdown-check-list/ http://code.google.com/p/dropdown-check-list/

有了一些不错的测试用例,http://dropdown-check-list.googlecode.com/svn/trunk/doc/ddcl-tests.html http://dropdown-check-list.googlecode.com/svn/trunk/doc/ddcl-tests.html.

此外,这里还有一些例子,http://dropdown-check-list.googlecode.com/svn/trunk/doc/dropdownchecklist.html http://dropdown-check-list.googlecode.com/svn/trunk/doc/dropdownchecklist.html.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 HTML 下拉列表中显示复选框? 的相关文章

随机推荐