Wie die Anzeige von Checkboxen in HTML-dropdown?

Brauche ich zum füllen einer Dropdown list (HTML <select></select>) mit Kontrollkästchen. Ich habe versucht, um anzuzeigen, wie eine Liste mit einem <div></div> tag, und die Anwendung einiger Stile im JSP-Seite, aber es zeigt eine Liste wie eine Liste. Unten ist der code in der JSP-Seite mit Javascript, dass nur Alarme die Liste der Sprachen, die geprüft worden sind, wenn der einzige button auf der Seite angeklickt wird.

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

Nur zeigt eine Liste der Sprachen, wie in der folgenden snap shot.

Wie die Anzeige von Checkboxen in HTML-dropdown?

Was ich brauche, ist zu zeigen, diese Liste der Sprachen, die als drop-down (nicht als Liste, Feld). Wie kann ich dies tun?

Wie, code.google.com/p/dropdown-check-list ?
Eigentlich sollte man diesen post als Antwort. Bhavesh, Was Joe sagt, mit seinem Kommentar, dass die plain old HTML kann es nicht...Sie müssen beschäftigen einige JavaScript-Zauberei...und ein paar gute Menschen haben schon die meiste Arbeit getan und mit der Welt geteilt in den link Joe zur Verfügung gestellt.

InformationsquelleAutor Bhavesh | 2012-02-24

  1. 15

    Hier ist ein link zu einer guten Bibliothek, http://code.google.com/p/dropdown-check-list/

    Mit einigen netten Testfälle, http://dropdown-check-list.googlecode.com/svn/trunk/doc/ddcl-tests.html.

    Zusätzlich, hier sind einige Beispiele, http://dropdown-check-list.googlecode.com/svn/trunk/doc/dropdownchecklist.html.

    Guter Fang, leider: "DDCL V1.4 ist NICHT kompatibel mit jQuery 1.8"
    Funktioniert gut mit jquery/1.10.2 und jqueryui/1.10.3. jsbin.com/OrEqUfI/2/edit?html,Ausgang

    InformationsquelleAutor Joe

  2. 2

    Ich hoffe, ich bin nicht wirklich spät 🙂

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

    InformationsquelleAutor Richeve Bebedor

Schreibe einen Kommentar