javascript - 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"
".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?

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

Share Improve this question asked Feb 24, 2012 at 19:03 Bhavesh 4,67713 gold badges45 silver badges70 bronze badges

6 Like, code.google.com/p/dropdown-check-list ? – Joe Commented Feb 24, 2012 at 19:04
@JoeTuskan You should really post this as the answer. Bhavesh, What Joe is saying with his comment is that plain old HTML can't do it...you have to employ some JavaScript wizardry...and some good people have already done most of the work and shared it with the world in the link Joe provided. – Bradley Mountford Commented Feb 24, 2012 at 19:32

Add a comment |

2 Answers 2

Sorted by: Reset to default 15

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.

I hope I'm not really late :)

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to display checkboxes within HTML dropdown? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)