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>

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

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

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

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

因此，在窗口小部件的初始化中，我将这两行代码绑定到beforeopen事件。在beforeopen的处理中，我将所选项添加到其他项，并刷新小部件（因为它只读取多次选择，如果不刷新，则顺序保持不变，即使HTML更改）。 / p>

我无法提供答案，因为我没有足够的声誉。但是谢谢！

Answer 1

试试这个。

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

→

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

1 个答案: