Javascript 使用jQuery自定义下拉选项排序

我需要帮助排序下拉菜单的选项。我有以下资料：

<select name="models" id="models">
    <option value="14b">14b</option>
    <option value="ab">ab</option>
    <option value="14">14</option>
    <option value="bc">bc</option>
    <option value="15">15</option>
    <option value="101">101</option>
    <option value="13">13</option>
</select>

<select name="models" id="models">
    <option value="ab">ab</option>
    <option value="bc">bc</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="14b">14b</option>
    <option value="15">15</option>
    <option value="101">101</option>
</select>

14b
ab
14
卑诗省
15
101
13

我想对选项进行排序，使其显示如下：

<select name="models" id="models">
    <option value="14b">14b</option>
    <option value="ab">ab</option>
    <option value="14">14</option>
    <option value="bc">bc</option>
    <option value="15">15</option>
    <option value="101">101</option>
    <option value="13">13</option>
</select>

<select name="models" id="models">
    <option value="ab">ab</option>
    <option value="bc">bc</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="14b">14b</option>
    <option value="15">15</option>
    <option value="101">101</option>
</select>

ab
卑诗省
13
14
14b
15
101

下拉列表将有两种类型的条目，一种是以数字开头的条目，另一种是以字母开头的条目。我想首先简单地对以字母开头的内容进行排序，并将它们放在下拉列表的开头。然后，一些以数字开头的字母有时会在末尾加上一两个字母。有字母的会被认为比没有字母的要大一步，然后再定位，例如，顺序是14>14b>15

我已经搜索并找到了几篇关于如何对列表/下拉列表进行排序的帖子，但这有点复杂，我似乎无法独自找出如何将所有内容组合在一起。有人能帮忙吗？ 谢谢大家!

试试这个

函数natcmp（a，b）{
var ra=a.innerText.match（/\D+\D+/g）；
var rb=b.innerText.match（/\D+\D+/g）；
var r=0；
while（！r&&ra.length&&rb.length）{
var x=ra.shift（），y=rb.shift（），
nx=parseInt（x），ny=parseInt（y）；
如果（伊斯南（纽约州）和伊斯南（纽约州））
{r=x>y？1:-1}
else if（isNaN（nx）| isNaN（ny））
{r=xy？-1:0）；}
其他的
r=nx-ny；
}
返回r | | ra.length-rb.length；
}
$（“#模型”）.html(
Array.prototype.slice.call（$（“#models”）[0].querySelectorAll（“选项”），0.sort（natcmp）
);

14b
ab
14
卑诗省
15
101
13
我们可以这样做（vanilla JS）：

（本质上，将子元素放入数组中，对它们进行排序，然后按照排序后的数组的顺序再次追加它们-本质上是将它们移动到正确的顺序）

（排序函数基本上检查a和b是否都有可以解析的整数——如果是，比较它们，如果它们相等，比较数字后面的字母。如果两者都是字母，则只进行文本比较。如果a是字母，b至少有数字，则a先进行比较，反之亦然）


const select=document.querySelector（“#models”）；
[…select.children].sort（mySort）.map（node=>select.appendChild（node））；
console.log（[…select.children]）；
函数mySort（a，b）{
常数[a_val，b_val]=[a.值，b.值]；
if（Math.abs（parseInt（a_val）-parseInt（b_val））>=0{
//两者都是数字（或至少以数字开头）
if（parseInt（a_val）-parseInt（b_val）==0{
//然后我们也需要比较后面的字母：
常量字母=a值替换（parseInt（a值），“”）；
常量b_字母=b_val.replace（parseInt（b_val），“”）；
返回a_字母。localeCompare（b_字母）
}否则{
//后面的字母对于比较来说并不重要：
返回parseInt（a_val）-parseInt（b_val）
}        
}else如果（Math.abs（parseInt（a_val））>=0）{
//只有a是一个数字，所以b首先：
返回1；
}else如果（Math.abs（parseInt（b_val））>=0）{
//只有b是一个数字，所以a首先：
返回-1；
}否则{
//两者都是字母，因此需要进行文本比较：
返回a_val.localeCompare（b_val）
}  
}

14b
ab
14
卑诗省
15
101
13
感谢您抽出时间回答我的问题，并为您的代码添加注释。因为我是JavaScript的新手，这帮助我一步一步地理解了你在做什么。对我个人来说，这是完美的！不客气：）-很高兴我能帮上忙。我的建议是在JQuery之前先掌握vanilla JS（或者，如果您可以帮助的话，根本不要使用JQuery）。这样，您的基础知识将更强大，更少地依赖于库或框架。感谢您抽出时间回答我的问题！这很好用，几乎是即插即用。我选择另一篇文章作为“答案”，因为它是第一篇，并且有评论，但我有一种感觉，这可能是一种更优雅的方法，因为作为新手，我更难理解它。不管怎样，我感谢你抽出时间来帮忙：）不客气：）我们是来帮忙的。不是为了分数。我首先回答的不是他：）你的标签可以处于活动状态，这样你就可以在我上方看到他的帖子：）但对我来说，你选择谁也不重要：）只需为uOh使用最好的一个。对不起，我以为答案是按时间顺序发布的，但我现在明白了。一旦我有了更多的经验，我肯定会在几周内回到你的答案上来，再次感谢！