Ausgewähltes jQuery-Plugin: Erhalte mehrere Auswahlwerte in der Reihenfolge, in der sie geklickt wurden

Question

Ich benutze das gewählte jQuery-Plugin für ein multiple select-Element.

Ich möchte den Wert der Optionen in der Reihenfolge abrufen und anzeigen, in der sie ausgewählt wurden (angeklickt).

Zum Beispiel, wenn ich auf „Three“ klicken, „Two“ dann „One“, soll ich die Werte in dieser Reihenfolge erhalten: [3, 2, 1]

ich das ‚Veränderung‘ Ereignis von Chosen verwenden, aber es gibt mir die Werte sortiert, wie sie im DOM deklariert sind. d.h .: [1, 2, 3]

Hier ist mein Code-Schnipsel:

<select class="chosen" data-order="true" name="multiselect[]" id="multiselect" multiple="true"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
    <option value="4">Four</option> 
    <option value="5">Five</option> 
</select> 

<div id="result"></div> 

<script type="text/javascript" src="jquery-1.11.0.js"></script> 
<script type="text/javascript" src="chosen.jquery.min.js"></script> 
<script type="text/javascript"> 
    $(".chosen").chosen({enable_search_threshold: 10}).change(function(event) { 
     if(event.target == this) { 
      var value = $(this).val(); 
      $("#result").text(value); 
     } 
    }); 
</script> 

jsFiddle Demo: http://jsfiddle.net/FjET4

Answer 1

Sie sind ein gemeinsames Problem mit Chosen gegenüber. Die ausgewählte Mehrfachauswahl-Benutzeroberfläche verarbeitet die Auswahlreihenfolge nicht.

---

By the way, ist der folgende Teil der Veranstaltung nicht spezifisch:

if(event.target == this) 
{ 
    var value = $(this).val(); 
    $("#result").text(value); 
} 

In der Tat, es tut genau das gleiche jedes Mal wenn Sie ein Element aus. Mit $(this).val() werden Sie im Grunde nur gebeten, ein Array der Werte der ausgewählten Elemente abzurufen.

Und weil Chosen nicht die Reihenfolge der Auswahl behandelt, sendet es nur ["1", "2", "3"].

Eine Methode zum Abrufen der Auswahlreihenfolge, wie sie angezeigt wird, besteht darin, einige untergeordnete Elemente der ausgewählten Benutzeroberfläche zu durchlaufen. Schauen Sie:

<!-- Chosen UI container --> 
<div class="chosen-container chosen-container-multi ..." id="multiselect_chosen"> 
    <ul class="chosen-choices"> 
     <li class="search-choice"> 
      <span>Three</span> 
      <a class="search-choice-close" data-option-array-index="2"></a> 
     </li> 
     <li class="search-choice"> 
      <span>Five</span> 
      <a class="search-choice-close" data-option-array-index="4"></a> 
     </li> 
     .... 
    </ul> 
    ... 
</div> 

Wie Sie sehen können, gibt es in <ul class="chosen-choices"></ul> einige interessante Sachen ist. Das Attribut data-option-array-index enthält den Index des ausgewählten Elements relativ zu den tatsächlichen DOM-Elementoptionen <select>.

---

Ich schrieb ein kleines Plugin für Auserwählte, dass Sie die Auswahl um abrufen kann, genau so, wie es scheint, und es zu zwingen, über eine Anordnung von geordneten Werten (z .: ["3", "2", "1"]).

Es ist Open-Source- und funktioniert sowohl für Chosen jQuery Plugin und Prototype Plugin.

• Demonstration: http://labo.tristan-jahier.fr/chosen_order
• Github-Repository: https://github.com/tristanjahier/chosen-order

Answer 2

Das gewählte Plugin hat einen "change" Fall, dass Sie eine Liste zu halten und aktualisieren mit ausgewählten Elementen in der Reihenfolge, in der können Sie wurden ausgewählt.

$("#mnu_chosen").on('change', function(e, params) { 
     var selected = params.selected; 
     var deselected = params.deselected; 
     var selected_keys = $(this).data('selected_keys'); 
     if (!selected_keys) { 
      $(this).data('selected_keys', []); 
      selected_keys = $(this).data('selected_keys'); 
     } 
     if (deselected) { 
      for (var i = 0; i < selected_keys.length; i++) { 
       if (selected_keys[i] == deselected) { 
        selected_keys.splice(i, 1); 
        break; 
       } 
      } 
     } 
     if (selected) { 
      selected_keys.push(selected); 
     } 
     //See array "selected_keys" 
     //Do something on change... 
    }); 

Answer 3

Hier ist eine eigenständige Funktion, die den Job erledigt. Ich benutze gewählt 1.2.0

var orderBy = ChosenValInSelectedOrder('OrderReportBy'); 

function ChosenValInSelectedOrder(id) { 
    var $chosenOptions = $('#' + id + '_chosen .search-choice-close'); 
    if ($chosenOptions.length == 0) 
     return null; 
    var results = []; 
    var $options = $('#' + id + ' option'); 
    $chosenOptions.each(function() { 
     var idx = parseInt($(this).attr('data-option-array-index')); 
     results.push($options[idx].value); // value from original select 
    }); 
    return results; 
}