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

Question

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

我想检索并按选择它们(单击)的顺序显示选项值.

例如,如果我点击"Three","Two"然后"One",我应该按以下顺序获取值: [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

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

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

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

实际上,每次选择项目时它都会完全相同.随着$(this).val()你基本上只是要求偏偏检索所选元素的值的数组.

而且因为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