wake-up-neo.net

jQuery Multiselect-Dropdown-Menü

Ich habe eine einfache HTML Multi Select 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 diese Liste weiterhin verwenden, falls Javascript deaktiviert ist. Mit JavaScript möchte ich die Liste jedoch als Dropdown-Liste mit Mehrfachauswahl rendern. Das heißt, es wird nur ein Element in der Liste angezeigt, bis darauf geklickt wird, und es wird dann erweitert, um x Elemente anzuzeigen und einen Bildlauf durchzuführen, in dem ich mehrere Elemente auswählen kann, wie Sie es erwarten würden, während Sie die Umschalt- oder Strg-Taste gedrückt halten.

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

Bearbeiten von Struts2-Benutzern. Die ausgewählte Antwort wird mit [] url-codiert. Dies führt zu Problemen in Struts2. Die Fehlerbehebung ist jedoch sehr einfach. Öffnen Sie einfach jquery.multiSelect.js und suchen Sie nach "[]" und löschen Sie die Instanz, die in einer Zeichenfolgenverkettung verwendet wird. Ich benutze auch jQuery 1.4.4 im Gegensatz zu der 1.3.2, die mitgeliefert wurde und alles funktioniert einwandfrei.

jqueryjquery-uijquery-pluginsmulti-select
50
Quaternion

Update (2017): Die folgenden zwei Bibliotheken sind jetzt die am häufigsten mit Javascript verwendeten Dropdown-Bibliotheken. Obwohl sie jQuery-native sind, wurden sie so angepasst, dass sie mit AngularJS 1.x und benutzerdefiniertem CSS für Bootstrap funktionieren. (Ausgewählter JS, die ursprüngliche Antwort hier, scheint an Popularität auf # 3 gefallen zu sein.)

Obligatorische Screenshots unten.

Select2: Select2

Auswählen: Selectize

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

Anbei sehen Sie einen Screenshot, wie die Mehrfachauswahlfunktion in Ausgewählt aussieht.

Chosen library

82
Suman

Ich war auch auf der Suche nach einem einfachen Multi Select für mein Unternehmen. Ich wollte etwas Einfaches, sehr anpassbares und ohne große Abhängigkeiten anderes als jQuery.

Ich habe keinen gefunden, der meinen Bedürfnissen entspricht, und habe mich daher dazu entschlossen, meinen eigenen Code zu erstellen.
Ich benutze es in der Produktion.

Hier sind einige Demos und Dokumentationen: loudev.com

Wenn Sie einen Beitrag leisten möchten, überprüfen Sie das Github-Repository

16
lou

  • Laden Sie jquery.multiselect herunter

  • Schließen Sie die Dateien jquery.multiselect.js und jquery.multiselect.css ein

    <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" />

  • Füllen Sie Ihren ausgewählten Eingang aus

  • Fügen Sie die Mehrfachauswahl hinzu

    $('#' + 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 });

  • Sie können den Stil ändern

    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; }

  • Wenn Sie die Auswahl erneut füllen möchten, müssen Sie sie aktualisieren:

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

  • So erhalten Sie die ausgewählten Werte (durch Kommas getrennt):

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

  • So löschen Sie alle ausgewählten Werte:

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

9
Oranit Dar

Schauen Sie sich erichynds dropdown multiselect mit einer Vielzahl von Einstellungen und Abstimmungen an.

3
sergejsvit

Sie können chosen.i verwenden, um alle Dateien von diesem Link herunterzuladen Ausgewählter Download-Link

<!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>

Alle Dateien in demselben Ordner

3
syed mhamudul hasan akash

Sie könnten Ihre eigenen hacken, ohne sich auf jQuery-Plugins zu verlassen ... obwohl Sie extern (in JS) den Überblick über ausgewählte Elemente behalten müssten, da der Übergang die ausgewählten Statusinformationen entfernen würde:

<head>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
  <script type='text/javascript'>
    $(window).load(function(){
      $('#transactionType').focusin(function(){
        $('#transactionType').attr('multiple', true);
      });
      $('#transactionType').focusout(function(){
        $('#transactionType').attr('multiple', false);
      });
    });>  
  </script>
</head>
<body>
  <select id="transactionType">
    <option value="ALLOC">ALLOC</option>
    <option value="LOAD1">LOAD1</option>
    <option value="LOAD2">LOAD2</option>
  </select>  
</body>
1
nmz787
<select id="mycontrolId" multiple="multiple">
   <option value="1" >one</option>
   <option value="2" >two</option>
   <option value="3">three</option>
   <option value="4">four</option>
</select>

var data = "1,3,4"; var dataarray = data.split(",");

$("#mycontrolId").val(dataarray);
1
wasay raza

Ich habe jQuery MultiSelect verwendet, um ein Dropdown-Menü mit mehreren Auswahlen und einem Kontrollkästchen zu implementieren. Sie können den Implementierungsleitfaden von hier aus sehen - Mehrfachauswahl-Dropdown-Liste mit Kontrollkästchen

Die Implementierung ist sehr einfach und erfordert nur den folgenden Code.

$('#transactionType').multiselect({
    columns: 1,
    placeholder: 'Select Transaction Type'
});
1
JoyGuru

Möchten Sie so etwas tun http://jsfiddle.net/robert/xhHkG/

$('#transactionType').attr({
    'multiple': true,
    'size' : 10
});

Setzen Sie das in eine $(function() {...}) oder eine andere onload

Bearbeiten

Lesen Sie Ihre Frage noch einmal durch, Sie suchen nicht wirklich nach einer Mehrfachauswahl ... sondern nach einem Dropdown-Feld, in dem Sie mehrere auswählen können. Ja, wahrscheinlich ist es das Beste, ein Plugin dafür zu verwenden oder es von Grund auf neu zu schreiben.

0
Robert