Question

$( document ).ready(function() {
    var options = $('select#myshp_search_field_7 option');
    var arr = options.map(function(_, o) {
        return {
            t: $(o).text(),
            v: o.value
        };
    }).get();
    arr.sort(function(o1, o2) {
        return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0;
    });
    options.each(function(i, o) {
        console.log(i);
        o.value = arr[i].v;
        $(o).text(arr[i].t);
    });
});

所以这会对我的选择字段进行排序，但它只对第一个数字（数字）＆gt;

进行排序

<select id='myshp_search_field_7'>
    <option value='10'>10</option>
    <option value='5'>5</option>
    <option value='3'>3 </option>
    <option value='11'>11 </option>
</select>

代码的结果是：10,11,3,5

但我希望它是：3,5,10,11

Answer 1

问题是因为您正在比较字符串值。要更正此问题，请使用sort()将parseInt()逻辑中的值强制转换为整数：

arr.sort(function(o1, o2) {
  var o1t = parseInt(o1.t, 10), o2t = parseInt(o2.t, 10);
  return o1t > o2t ? 1 : o1t < o2t ? -1 : 0;
});

另请注意，您可以简化排序逻辑，因为您可以直接在option元素本身上工作，而无需先从map()对齐数组。试试这个：

$(document).ready(function() {
  $('#myshp_search_field_7 option').sort(function(a, b) {
    var aVal = parseInt($(a).val(), 10), bVal = parseInt($(b).val(), 10);
    return aVal > bVal ? 1 : aVal < bVal ? -1 : 0;
  }).appendTo('#myshp_search_field_7');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myshp_search_field_7">
    <option value="10">10</option>
    <option value="5">5</option>
    <option value="3">3</option>
    <option value="11">11</option>
</select>

Answer 2

使用parseInt进行数字排序：

arr.sort( (a, b) => parseInt(b, 10) - parseInt(a, 10) )

如何对两位数而不是一位进行排序？

2 个答案: