选择jQuery插件:按点击顺序获取多个选择值 [英] Chosen jQuery plugin : get multiple select values in the order they were clicked

问题描述

我在多个选择元素上使用了选择的jQuery插件.

I use Chosen jQuery plugin on a multiple select element.

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

I want to retrieve and to display the options value in the order they were selected (clicked).

例如，如果我单击三个"，两个"然后单击一个"，则应该按以下顺序获取值:[3, 2, 1]

For example, if I click on "Three", "Two" then "One", I should get the values in this order: [3, 2, 1]

我使用选择的'change'事件，但是它给了我在DOM中声明的顺序值.即:[1, 2, 3]

I use the 'change' event of Chosen but it gives me the values ordered as they are declared in the DOM. i.e.: [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

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

推荐答案

您遇到了选择的常见问题. 选择的多个选择用户界面实际上并不处理选择顺序.

You are facing a common issue with Chosen. Chosen multiple select UI does not actually handle selection order.

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

By the way, the following part is not specific to the event:

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

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

In fact, it does exactly the same thing everytime you select an item. With $(this).val() you are basically just asking Chosen to retrieve an array of the values of the selected elements.

并且由于选择不处理选择顺序，因此它只会向您发送["1", "2", "3"].

And because Chosen does not handle selection order, it just sends you ["1", "2", "3"].

一种检索选择顺序的方法是遍历选择的" UI的某些子级.看:

A method to retrieve the selection order as it appears is to iterate though some children of the Chosen UI. Look:

<!-- 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元素选项的所选项目的索引.

As you can see, there is some interesting stuff in <ul class="chosen-choices"></ul>. The data-option-array-index attribute contains the index of the selected item, relative to the actual <select> DOM element options.

我为Chosen写了一个小插件，可让您完全按照选择的顺序检索选择顺序，并通过一系列有序值(例如:["3", "2", "1"])强制选择顺序.

I wrote a small plugin for Chosen that allows you to retrieve the selection order, exactly as it appears, and to force it via an array of ordered values (e.g.: ["3", "2", "1"]).

这是开源，适用于选择的 jQuery 插件和 Prototype 插件.

It is open-source and works for both Chosen jQuery plugin and Prototype plugin.

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

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

这篇关于选择jQuery插件:按点击顺序获取多个选择值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！