将所选项目移动到已排序的多个选择（Javascript）的顶部

Question

我正在使用jQueryUI多选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>

从小部件的网站，我看到它有一个返回所选项目数组的方法，并且它在打开之前有一个事件。 所以我认为我可以通过在打开之前处理事件来管理排序（使用该数组），但我对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')

→