HTML 选择中的排序选项

本文介绍了HTML 选择中的排序选项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

有这样的情况:

<select id="trollSelect">
    <option value="PL">Polish Troll</option>
    <option value="EN">English Troll</option>
    <option value="JP">Japanese Troll</option>
    [...] //more options created dynamically
</select>

Option values 和 Option texts 在 Select 中未排序.是否可以按字母顺序在 JQuery 或 Javascript 中按 value 或 text 对这些选项进行排序??

Option values and Option texts are unsorted in Select. Is this possible to sort this options in JQuery or Javascript by value or text alphabetically ??

结果应该是这样的:

<select id="trollSelect">
    <option value="EN">English Troll</option>
    <option value="JP">Japanese Troll</option>
    <option value="PL">Polish Troll</option>
    [...] //more options created dynamically
</select>

推荐答案

这段代码应该可以.我已经根据它们的值对它们进行了排序，但这也可以用于根据文本进行排序.

This code should do it. I've sorted them on their values but this can also be used to sort based on the text.

$(document).ready(function() {
    var opt = $("#trollSelect option").sort(function (a,b) { return a.value.toUpperCase().localeCompare(b.value.toUpperCase()) });
    $("#trollSelect").append(opt);
});

这是一个 fiddle 相同的

这篇关于HTML 选择中的排序选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！