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检索所选元素的值数组。

由于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

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

这是一个完成这项工作的独立功能。我使用的是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;
}

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

3 个答案: