排序选项值ASC

Question

我不知道如何正确地排序我的select选项值。我的select元素返回文本值，如下所示：

** Please choose
2-3 pers.
16-18 pers.
20-24 pers
3-4 pers.
4-6 pers.
5-7 pers
6-8 pers.
8-10 pers.
10-12 pers.
12-14 pers.
14-16 pers.
16-18 pers.

我知道javascript的排序方式如下：

""
1
10
11
2
3
4
5
6
7
8
9

但我希望它从"“到11 ("",1,2,3,4,5,6,7,8,9,10,11)。会很感谢这里的一些专业知识。谢谢。

HTML：

<select class="form-control" id="dessertservingID" data-value="10" name="dessertservingID" required="">
<option value="">** Please choose</option>
<option value="7">10-12 pers.</option>
<option value="8">12-14 pers.</option>
<option value="9">14-16 pers.</option>
<option selected="" value="10">16-18 pers.</option>
<option value="1">2-3 pers.</option>
<option value="11">20-24 pers.</option>
<option value="2">3-4 pers.</option>
<option value="3">4-6 pers.</option>
<option value="4">5-7 pers.</option>
<option value="5">6-8 pers.</option>
<option value="6">8-10 pers.</option>
</select>

Javascript：

$(function() {
    var options = $('#dessertservingID option');
    options.sort(function(a, b) {
    if (a.value > b.value) {
        return 1;
    }
    else if (a.value < b.value) {
    return -1;
    }
    else {
    return 0;
    }
})

$("#dessertservingID").empty().append(options);

// Vive la France!

$('#dessertservingID option[value=""]').insertAfter($('#dessertservingID option:first'));

});

Answer 1

问题是因为您将value属性作为字符串进行比较。首先使用parseInt()将它们转换为整数。

还要注意，您可以通过简单地从另一个值中减去一个值来简化sort()逻辑：

​

$(function() {
  var $options = $('#dessertservingID option');
  $options.sort(function(a, b) {
    return parseInt(a.value, 10) - parseInt(b.value, 10);
  })

  $("#dessertservingID").empty().append($options);

  $('#dessertservingID option[value=""]').insertAfter($('#dessertservingID option:first'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="dessertservingID" data-value="10" name="dessertservingID" required="">
  <option value="">** Please choose</option>
  <option value="7">10-12 pers.</option>
  <option value="8">12-14 pers.</option>
  <option value="9">14-16 pers.</option>
  <option selected="" value="10">16-18 pers.</option>
  <option value="1">2-3 pers.</option>
  <option value="11">20-24 pers.</option>
  <option value="2">3-4 pers.</option>
  <option value="3">4-6 pers.</option>
  <option value="4">5-7 pers.</option>
  <option value="5">6-8 pers.</option>
  <option value="6">8-10 pers.</option>
</select>

​

Answer 2

您可以使用parseInt来获取字符串的数值。它将尝试从字符串的开头获取任何数值，直到遇到非数值为止。在您的例子中，这就是您想要的--您将从"20-24"中获得20

​

$(function() {
  var options = $('#dessertservingID option');
  options.sort(function(a, b) {
    //parse the values
    var valueA = parseInt(a.value);
    var valueB = parseInt(b.value);
    if (valueA > valueB) {
      return 1;
    } else if (valueA < valueB) {
      return -1;
    } else {
      return 0;
    }
  })

  $("#dessertservingID").empty().append(options);

  $('#dessertservingID option[value=""]').insertAfter($('#dessertservingID option:first'));

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="dessertservingID" data-value="10" name="dessertservingID" required="">
  <option value="">** Please choose</option>
  <option value="7">10-12 pers.</option>
  <option value="8">12-14 pers.</option>
  <option value="9">14-16 pers.</option>
  <option selected="" value="10">16-18 pers.</option>
  <option value="1">2-3 pers.</option>
  <option value="11">20-24 pers.</option>
  <option value="2">3-4 pers.</option>
  <option value="3">4-6 pers.</option>
  <option value="4">5-7 pers.</option>
  <option value="5">6-8 pers.</option>
  <option value="6">8-10 pers.</option>
</select>

​

Answer 3

在比较值之前，尝试使用parseInt将option.value解析为整数：

$(function() {
    var options = $('#dessertservingID option');
    options.sort(function(a, b) {

    let aValue = parseInt(a.value);
    let bValue = parseInt(b.value);

    aValue = isNaN(aValue) ? -1 : aValue;
    bValue = isNaN(bValue) ? -1 : bValue;

    return aValue - bValue;
})

使用parseInt强制进行正确的数字比较，而不是比较字符串的键代码值。isNaN检查是针对空值进行的，如果解析的整数为NaN，则将该值设置为-1可确保它是第一个返回值。