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

标签 javascript jquery html sorting multi-select

我正在使用 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 发生变化,顺序也会保持不变)。

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

最佳答案

试试这个。

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

关于javascript - 将所选项目移动到已排序多选的顶部(Javascript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12297697/

相关文章:

html - 使用 SVG 剪辑(或屏蔽)DIV

javascript - jQuery mobile,在页面之间传递 radio 检查值

javascript - MobX:如何改变一个可观察值以响应另一个值的变化?

jquery - 如何设置 Bootstrap 选项卡的高度和边框?

javascript - 如何使用 jQuery/Javascript 隐藏 WordPress 的 TinyMCE 图像编辑器对话框中的元素?

javascript - 从左向右滑动卡住

javascript - 单击 PHP/Jquery 更新附加变量

c# - 在 Watin 中调用 Javascript

javascript - jQuery 删除索引在两个值之间的复选框

css - 无法将我的 div 彼此相邻放置