选择jQuery插件：按照单击的顺序获取多个选择值

我在多选元素上使用Chosen jQuery插件。

我想检索并按选择它们（单击）的顺序显示选项值。

例如，如果我点击“Three”，“Two”然后“One”，我应该按此顺序获取值： [3, 2, 1]

我使用了Chosen的’change’事件，但是它给了我在DOM中声明的值。 即： [1, 2, 3]

这是我的代码片段：

  One Two Three Four Five  
    $(".chosen").chosen({enable_search_threshold: 10}).change(function(event) { if(event.target == this) { var value = $(this).val(); $("#result").text(value); } });  

jsFiddle演示： http ： //jsfiddle.net/FjET4

Answer 1

您正面临着与选择的共同问题。 选择多个选择UI实际上不处理选择顺序。

---

顺便说一句，以下部分并非特定于事件：

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

实际上，每次选择项目时它都会完全相同。 使用$(this).val()您基本上只是要求Chosen检索所选元素的值数组。

因为Chosen不处理选择顺序，它只会发送给你["1", "2", "3"] 。

---

检索选择顺序的方法是迭代选择UI的一些子项。 看：

  
 
 
 Three  
 
 Five  
 .... 
 ...  

如你所见，

有一些有趣的东西。 data-option-array-index属性包含所data-option-array-index的索引，相对于实际的 DOM元素选项。

---

我为Chosen编写了一个小插件，允许您检索选择顺序，就像它出现的那样，并通过一系列有序值强制它（例如： ["3", "2", "1"] ）。

它是开源的 ，适用于选择的jQuery插件和Prototype插件。

• 示范： http ： //labo.tristan-jahier.fr/chosen_order
• Github存储库： https ： //github.com/tristanjahier/chosen-order

Answer 2

Chosen插件有一个“更改”事件，您可以使用该事件按选定项目的顺序保留和更新列表。

  $("#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

这是一个独立的function，可以完成这项工作。 我正在使用Chosen 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; }