jquery - 选择 jQuery 插件 : get multiple select values in the order they were clicked

Question

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

我想按照选择(单击)的顺序检索并显示选项值。

例如，如果我点击“三”、“二”然后“一”，我应该按以下顺序获取值:[3, 2, 1]

我使用了 Chosen 的“change”事件，但它给了我在 DOM 中声明时排序的值。即:[1,2,3]

这是我的代码片段:

<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 演示:http://jsfiddle.net/FjET4

Answer 1

您遇到了 Chosen 的常见问题。 选择的多个选择 UI 实际上并不处理选择顺序。

<小时/>

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

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

事实上，每次您选择一个项目时，它都会执行完全相同的操作。与$(this).val()您基本上只是要求 Chosen 检索所选元素的值的数组。

因为 Chosen 不处理选择顺序，所以它只是向您发送 ["1", "2", "3"] .

<小时/>

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

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

正如你所看到的，<ul class="chosen-choices"></ul>中有一些有趣的东西。 。 data-option-array-index属性包含所选项目的索引，相对于实际的 <select> DOM 元素选项。

<小时/>

我为 Chosen 编写了一个小插件，它允许您完全按照显示的样子检索选择顺序，并通过有序值数组强制执行它(例如: ["3", "2", "1"] )。

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

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