将选定的项目移至已排序的多项选择的顶部（Javascript）

Question

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

我已经排序了（在用户名上）多重选择，如下所示：

<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 事件。所以我认为我可以通过处理 beforeopen 事件来管理排序（使用该数组），但我对 javascript 相当陌生，任何人都可以指出我正确的方向吗？

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

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

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

因此，在小部件的初始化中，我将这两行代码绑定到 beforeopen 事件。在 beforeopen 的处理中，我将所选项目添加到其他项目之前，并刷新小部件（因为它只读取多选一次，并且如果不刷新，即使 HTML 发生更改，顺序也保持不变）。

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

Answer 1

尝试这个。

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

→