jQuery multiselect Dropdown-Menü

Question

jQuery multiselect Dropdown-Menü

Gefragt el 20 de Januar, 2011: Wann wurde die Frage gestellt
429437 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich habe eine einfache html-Mehrfachauswahl-Dropdown-Liste:

<select id="transactionType" multiple="multiple" size="10">
  <option value="ALLOC">ALLOC</option>
  <option value="LOAD1">LOAD1</option>
  <option value="LOAD2">LOAD2</option>
  <!-- etcetera... -->
</select>

Ich möchte weiterhin diese Liste für den Fall verwenden, Javascript deaktiviert ist jedoch mit javaScript Ich möchte die Liste als Multi-Select-Dropdown-Liste zu machen. Das heißt, es zeigt nur ein Element in der Liste, bis geklickt und dann erweitert, um x Elemente zu zeigen und bieten Scrollen, wo ich mehrere Elemente auswählen können, wie Sie erwarten würden, während Sie Umschalt- oder Strg halten.

Neu bei jQuery war die Suche nach dem http://jquery.com/ aber ich habe noch nicht gefunden, was ich brauche.

bearbeiten Struts2-Benutzer, die ausgewählte Antwort wird url kodieren mit [] dies verursacht Probleme in Struts2 der Fix ist jedoch sehr einfach. Öffnen Sie einfach jquery.multiSelect.js und suchen Sie nach "[]" und löschen Sie die eine Instanz dies in einer String-Verkettung verwendet wird. Ich bin auch mit jQuery 1.4.4 im Gegensatz zu den 1.3.2, die mit ihm gebündelt kam und alles funktioniert ganz gut.

Gefragt el 20 de Januar, 2011 von Quaternion

Answer 1

5 Antworten

Answer 2

91voto

Suman Punkte 8751

Update (2017): Die folgenden zwei Bibliotheken sind inzwischen die am häufigsten verwendeten Dropdown-Bibliotheken in Javascript. Während sie jQuery-nativ sind, wurden sie angepasst, um mit allem von AngularJS 1.x zu arbeiten, mit benutzerdefinierten CSS für Bootstrap. (Chosen JS, die ursprüngliche Antwort hier, scheint auf # 3 in der Popularität gefallen zu sein.)

Wählen Sie2: https://select2.github.io/
Auswählen: http://selectize.github.io/selectize.js/

Obligatorische Bildschirmfotos unten.

Wählen Sie2:

Auswählen:

Originalantwort (2012) : Ich denke, dass die Ausgewählte Bibliothek könnte auch nützlich sein. Es ist in jQuery, Prototype und MooTools Versionen verfügbar.

Im Anhang finden Sie einen Screenshot, der zeigt, wie die Mehrfachauswahlfunktion in Chosen aussieht.

Chosen library

Beantwortet el 28 de Februar, 2012 von Suman (8751 Punkte )

Answer 3

16voto

lou Punkte 2030

Ich war auch auf der Suche nach einem einfachen Multiselect für mein Unternehmen. Ich wollte etwas einfaches, hoch anpassbar und ohne große Abhängigkeiten andere als jQuery.

Ich habe keine gefunden, die meinen Bedürfnissen entsprach, also habe ich beschlossen, meine eigene zu programmieren.
Ich verwende es in der Produktion.

Hier finden Sie einige Demos und Dokumentationen: loudev.de

Wenn Sie einen Beitrag leisten möchten, prüfen Sie die Github-Repository

Beantwortet el 17 de August, 2011 von lou (2030 Punkte )

Answer 4

14voto

Oranit Dar Punkte 1261

D
I

<script src="jquery-ui-multiselect-widget-master/src/jquery.multiselect.js" type="text/javascript"></script> <link rel="stylesheet" href="jquery-ui-multiselect-widget-master/jquery.multiselect.css" />
P
A

$('#' + Field).multiselect({ checkAllText: "Your text for CheckAll", uncheckAllText: "Your text for UncheckCheckAll", noneSelectedText: "Your text for NoOptionHasBeenSelected", selectedText: "You selected # of #" //The multiselect knows to display the second # as the total });
Y

ui-multiselect { //The button background:#fff !important; //background-color wouldn't work here text-align: right !important; } ui-multiselect-header { //The CheckAll/ UncheckAll line) background: lightgray !important; text-align: right !important; } ui-multiselect-menu { //The options text-align: right !important; }
I

$('#' + Field).multiselect('refresh');
T

var SelectedOptions = $('#' + Field).multiselect("getChecked").map(function () { return this.value; }).get();
T

$('#' + Field).multiselect("uncheckAll");

Beantwortet el 4 de September, 2014 von Oranit Dar (1261 Punkte )

Answer 5

3voto

sergejsvit Punkte 39

Werfen Sie einen Blick auf erichynds Dropdown-Multiselect mit einer großen Anzahl von Einstellungen und Stimmungen.

Beantwortet el 21 de Oktober, 2011 von sergejsvit (39 Punkte )

Answer 6

3voto

syed mhamudul hasan akash Punkte 1323

Y C

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="prism.css" rel="stylesheet" type="text/css" />
    <link href="chosen.css" rel="stylesheet" type="text/css" />
    <script src="jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="chosen.jquery.js" type="text/javascript"></script>
    <script src="prism.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(".chzn-select").chosen();
        });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

<ion-view view-title="Profile">
<ion-content class="padding">

<div>
    <label class="item item-input">
        <div class="input-label">Enter Your Option</div>
            <select class="chzn-select" multiple="true" name="faculty" style="width:1000px;">
                <option value="Option 2.1">Option 2.1</option>
                <option value="Option 2.2">Option 2.2</option>
                <option value="Option 2.3">Option 2.3</option>
            </select>   
    </label>
</div>
</ion-content>
</ion-view> 
    </div>
    </form>
</body>
</html>

A

Beantwortet el 4 de April, 2016 von syed mhamudul hasan akash (1323 Punkte )

jQuery multiselect Dropdown-Menü

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

jQuery multiselect Dropdown-Menü

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: