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

Question

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

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

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

我使用 Chosen 的“更改”事件，但它为我提供了在 DOM 中声明的有序值。即：[1, 2, 3]

这是我的代码 sn-p：

<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 的一个常见问题。 Chosen multiple select 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"]）。

它是开源，适用于Chosen 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

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