选定的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

- user3289573

Answer 1

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

---

顺便说一下，以下部分与事件无关：

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

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

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

---

按照显示顺序检索选择顺序的方法是遍历一些Chosen 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"]）强制执行它。

这是一个开源项目，适用于 Chosen 的 jQuery 插件和 Prototype 插件。

• 演示地址：http://labo.tristan-jahier.fr/chosen_order
• Github 代码库：https://github.com/tristanjahier/chosen-order

- Tristan Jahier

Answer 2

这里有一个独立的函数可以完成此任务。我正在使用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;
}

- GaryH

Answer 3

Chosen插件有一个“change”事件，您可以使用它来保留和更新所选项目的列表，并按照选择的顺序进行排序。

    $("#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...
    });

- c0xc