javascript - 将所选项目移动到已排序多选的顶部(Javascript)

Question

我正在使用 jQueryUI multi-select Widget为多选绘制了一个漂亮的下拉菜单小部件。

我有一个已经排序的(在用户名上)这样的多选:

<select multiple="multiple" name="users" id="id_users">
<option value="1" selected="selected">aaa</option>
<option value="44">bbb</option>
<option value="21" selected="selected">ccc</option>
<option value="50">ddd</option>
<option value="16">eee</option>
<option value="25" selected="selected">fff</option>
</select>

而且我想保持用户名排序，但每次用户打开下拉菜单时，将所选项目移动到列表顶部。所以在这个例子中，新订单必须是:

<select multiple="multiple" name="users" id="id_users">
<option value="1" selected="selected">aaa</option>
<option value="21" selected="selected">ccc</option>
<option value="25" selected="selected">fff</option>
<option value="44">bbb</option>
<option value="50">ddd</option>
<option value="16">eee</option>
</select>

从小部件的网站上，我看到它有一个返回所选项目数组的方法，并且它有一个 beforeopen 事件。所以我认为我可以通过在打开之前处理事件来管理排序(使用该数组)，但我对 javascript 很陌生，有人可以指出我正确的方向吗？

我在这里搜索，找到的所有解决方案都解决了“按文本排序”的问题(这不是我需要的)。

编辑:我用这种方式解决了:

$('#id_users').multiselect({
    beforeopen: function(event, ui) {
        $('#id_users option:selected').prependTo('#id_users');
        $('#id_users').multiselect('refresh');
    }
});

所以在小部件的初始化中，我将这两行代码绑定(bind)到 beforeopen 事件。在处理 beforeopen 时，我将所选项目放在其他项目之前，并刷新小部件(因为它只读取一次多选，如果不刷新，即使 HTML 发生变化，顺序也会保持不变)。

我无法赞成答案，因为我没有足够的声誉。但是谢谢!

Answer 1

试试这个。

$('#id_users option:selected').prependTo('#id_users')

→