將所選項目移動到已排序的多個選擇（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')

→