Question

<select><option><input type="checkbox" />Headache</option></select>

通过使用上面的代码，我没有在下拉列表中找到一个复选框。你能建议我，我该怎么办。

Answer 1

您不能在select元素中包含输入控件。您必须使用JavaScript创建下拉列表，而根本不使用select元素。

Answer 2

不起作用的原因是表单元素不会像那样嵌套。幸运的是，有一个jquery插件可以做你想要的。 http://abeautifulsite.net/2008/04/jquery-multiselect/

Answer 3

使用“普通”HTML无法做到这一点，你需要抓住JavaScript，通过<ul><li>元素和CSS的良好镜头逐步增强这种下拉列表中的简单下拉列表。您可以找到here概述jQuery（JavaScript库）的所有功能，例如jQuery dropdown checklist。

这很简单，只需导入所需的JS库并应用它：

<!doctype html>
<html lang="en">
    <head>
        <title>Dropdown with checkboxes.</title>
        <script src="jquery.js"></script>
        <script src="dropdownchecklist.js"></script>
        <script>
            $(document).ready(function() {
                $("#select_id").dropdownchecklist();
            });
        </script>
    </head>
    <body>
        <select id="select_id">
            ...
        </select>
    </body>
</html>

就是这样。

Answer 4

BalusC的另一种方法是实际开发自己的自定义UI元素。不幸的是，这通常（或总是？）特定于浏览器。

我知道你可以为Firefox using XUL.

做到这一点

我确信你可以为IE做一些ActiveX技巧，虽然不知道如何。

Answer 5

如果我们想要对按钮执行操作以及此选中的列表框，请使用javascript和html。以下代码可能对您有所帮助。

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

添加复选框到下拉列表

5 个答案: