如何在 jquery 选择的下拉列表中按字母顺序重新排序 <options>

Posted 2023-05-07

【中文标题】如何在 jquery 选择的下拉列表中按字母顺序重新排序 <options>

【英文标题】：How do I re-order the <options> alphabetically in a jquery-chosen dropdown

【发布时间】：2014-06-17 03:30:38

【问题描述】：

我有一个可以满足我需要的下拉菜单。我唯一的问题是出于所有意图和目的，我无法为下拉列表提供排序列表，但需要在客户端按字母顺序对其进行排序。我似乎找不到与在所选插件中按字母顺序重新排列标签相关的任何内容。好奇是否有人必须这样做或可以指出我正确的方向。示例代码是：

$("#my-dropdown").chosen(no_results_text: "No results matched");

只是想知道在我自己用 javascript 订购之前是否可以选择组织它。提前致谢

【问题讨论】：

在呈现选项之前，只需在服务器端对列表进行排序即可。问题已解决。

【参考方案1】：

您应该先对列表进行排序...然后运行选择的插件。

// sort list
var my_options = $("#my-dropdown option");
my_options.sort(function(a,b) 
    if (a.text > b.text) return 1;
    else if (a.text < b.text) return -1;
    else return 0
)
$("#my-dropdown").empty().append(my_options);

// run chosen plugin
$("#my-dropdown").chosen(no_results_text: "No results matched");

列出从高度评价的答案中窃取的排序代码：

What is the most efficient way to sort an html Select's Options by value, while preserving the currently selected item?

【讨论】：

感谢您的回答。如果插件中没有方法，我打算只用 javascript 来做，但你继续为我写了 javascript！感谢帮助

我更改的一件事，您可以在此处更改以供其他人查看，我将文本设为小写以实现完整的字母排序.. tolowercase() 方法:) 再次感谢您的帮助

+1 用于添加HTML Select Options sorting的源问题

我必须赞扬你，dana 这个代码。当代码直接插入到下一个任务中时，它会令人耳目一新，但这成功了。

如果下拉列表绑定到数据库字段，上面的代码可能会改变页面加载时最初选择的内容，因此下拉列表不再对应数据库值。为了弥补这一点，在上面的“var my_options”行之后和排序之前，用var orig_option = $("#my-dropdown option").val();保存最初选择的值，然后在empty().append()行之后用$("#my-dropdown option").val(orig_option);恢复它

【参考方案2】：

查看 API，我也没有看到任何排序选项。但是，这里有两个可能会有所帮助的链接：

Ricky Rosario blog post of how to sort the select options jQuery Chosen Sortable project