Javascript 排序下拉选项

我试图整理一个下拉菜单，但在选项中有两个数字，14和11在8和9之前

我应该如何处理这个问题

我的代码如下：

<select id="test">
    <option>Size 9</option>
    <option>Size 14</option>
    <option>Size 8</option>
    <option>Size 11</option>
</select>

$("#test").html($("#test option").sort(function (a, b) {
    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1;
}))

9号
14号
8号
11号
$（“#测试”）.html（$（“#测试选项”）.sort（函数（a，b）{
返回a.text==b.text？0:a.text

我需要一个解决方案来排序下拉列表，即使只有字符，而不是混合字符

---

您可以使用以下代码段，顺便说一句，该代码段将为每个选项设置值：

$（“#测试”）.html（$（“#测试选项”）.val（函数（）{
返回此.text.match（/\d+/）；
}).排序（功能（a、b）{
var a=parseInt（a.value，10），b=parseInt（b.value，10）；
返回a

或无设置值：

$（“#测试”）.html（$（“#测试选项”）.sort（函数（a，b）{
变量a=parseInt（a.text.match（/\d+/），10），b=parseInt（b.text.match（/\d+/），10）；
返回a

编辑：（以下评论）

您可以跳过排序默认选项，如下所示：

$（“#测试”）.html（$（“#测试选项”）.val（函数（i）{
返回i！==0？this.text.match（/\d+/）：this.value；
}).排序（功能（a、b）{
变量a=parseInt（a.value！=“a.value:-1,10），
b=parseInt（b.值，10）；
返回a

您可以使用以下代码段，顺便说一句，该代码段将为每个选项设置值：

$（“#测试”）.html（$（“#测试选项”）.val（函数（）{
返回此.text.match（/\d+/）；
}).排序（功能（a、b）{
var a=parseInt（a.value，10），b=parseInt（b.value，10）；
返回a

或无设置值：

$（“#测试”）.html（$（“#测试选项”）.sort（函数（a，b）{
变量a=parseInt（a.text.match（/\d+/），10），b=parseInt（b.text.match（/\d+/），10）；
返回a

编辑：（以下评论）

您可以跳过排序默认选项，如下所示：

$（“#测试”）.html（$（“#测试选项”）.val（函数（i）{
返回i！==0？this.text.match（/\d+/）：this.value；
}).排序（功能（a、b）{
变量a=parseInt（a.value！=“a.value:-1,10），
b=parseInt（b.值，10）；
返回a

您可以按值排序

html

9号
14号
8号
11号

js

$（“#测试”）.html（$（“#测试选项”）.sort（函数（a，b）{
返回parseInt（$（a）.val（））==parseInt（$（b）.val（））？0:parseInt（$（a）.val（））

您可以按值排序

html

9号
14号
8号
11号

js

$（“#测试”）.html（$（“#测试选项”）.sort（函数（a，b）{
返回parseInt（$（a）.val（））==parseInt（$（b）.val（））？0:parseInt（$（a）.val（））

---

当您将文本与包含一些数字的两个文本字段进行比较时比较仅适用于第一个数值。

例如：如果我们比较9号和14号，你会得到令人惊讶的结果，比如9号比14号大。这是因为只比较第一个数值，所以对于14，该值为数值，该值为1

在您的情况下，一个简单的解决方案可能是将值字段应用于选项，并使用值进行比较

<select id="test">
    <option value ="9">Size 9</option>
    <option value ="14">Size 14</option>
    <option value ="8">Size 8</option>
    <option value ="11">Size 11</option>
</select>

$("#test").html($("#test option").sort(function (a, b) {
    return parseInt(a.value,10) == parseInt(b.value,10) ? 0 : parseInt(a.value,10) < parseInt(b.value,10) ? -1 : 1;
}))

9号
14号
8号
11号
$（“#测试”）.html（$（“#测试选项”）.sort（函数（a，b）{
返回parseInt（a.value，10）=parseInt（b.value，10）？0:parseInt（a.value，10）

将文本与包含一些数字的两个文本字段进行比较时比较仅适用于第一个数值。

例如：如果我们比较9号和14号，你会得到令人惊讶的结果，比如9号比14号大。这是因为只比较第一个数值，所以对于14，该值为数值，该值为1

在您的情况下，一个简单的解决方案可能是将值字段应用于选项，并使用值进行比较

<select id="test">
    <option value ="9">Size 9</option>
    <option value ="14">Size 14</option>
    <option value ="8">Size 8</option>
    <option value ="11">Size 11</option>
</select>

$("#test").html($("#test option").sort(function (a, b) {
    return parseInt(a.value,10) == parseInt(b.value,10) ? 0 : parseInt(a.value,10) < parseInt(b.value,10) ? -1 : 1;
}))

9号
14号
8号
11号
$（“#测试”）.html（$（“#测试选项”）.sort（函数（a，b）{
返回parseInt（a.value，10）=parseInt（b.value，10）？0:parseInt（a.value，10）

您能否澄清“仅限字符”的含义？你的意思是“小”、“中”和“大”之类的吗？你是在比较字符串<代码>尺寸14总是排在尺寸9之前。为选项输入数字值，以便您可以按数字排序。您想对字符串或数字进行精确排序吗？实际上，您是按照文本进行排序的。因此，在排序时，首先对第一个数字进行排序w.r.t。在这种情况下，1在8,9之前，然后再进行排序。您能澄清一下“仅字符”的含义吗？你的意思是“小”、“中”和“大”之类的吗？你是在比较字符串<代码>尺寸14总是排在尺寸9之前。为选项输入数字值，以便您可以按数字排序。您想对字符串或数字进行精确排序吗？实际上，您是根据文本进行排序。因此，在排序时，首先对第一个数字进行w.r.t排序，在这种情况下，1位于8,9之前，然后再进行排序。谢谢；我如何让它忽略第一个选项“--选择一个大小--”？因为这也在整理中。谢谢；我如何让它忽略第一个选项“--选择一个大小--”？因为这也在整理中。

$("#test").html($("#test option").val(function (i) {
    return i !== 0 ? this.text.match(/\d+/) : this.value;
}).sort(function (a, b) {
    var a = parseInt(a.value !== ""?a.value:-1, 10),
        b = parseInt(b.value, 10);
    return a < b ? -1 : 1;
}));

<select id="test">
    <option value='9'>Size 9</option>
    <option value='14'>Size 14</option>
    <option value='8'>Size 8</option>
    <option value='11'>Size 11</option>
</select>

$("#test").html($("#test option").sort(function (a, b) {
    return parseInt($(a).val()) == parseInt($(b).val()) ? 0 : parseInt($(a).val()) < parseInt($(b).val()) ? -1 : 1;
}));

<select id="test">
    <option value ="9">Size 9</option>
    <option value ="14">Size 14</option>
    <option value ="8">Size 8</option>
    <option value ="11">Size 11</option>
</select>

$("#test").html($("#test option").sort(function (a, b) {
    return parseInt(a.value,10) == parseInt(b.value,10) ? 0 : parseInt(a.value,10) < parseInt(b.value,10) ? -1 : 1;
}))