Question

我有一个选择框，请参见下文。输出来自我们无法更改的地址系统。我希望格式采用数字顺序，即史密斯道1号，史密斯道3号，史密斯道5号等...

我一直在使用以下脚本来解决这个问题，并且我可以看到parseInt将字符串转换为数字，进行了正确的排序，但是删除了地址的最后一部分。所以我只会在输出中得到1、2、3等。

$(function() {
    var opAddress = [];
    $('option').each(function() {
      opAddress.push(parseInt($(this).text(), 10));
    });
    opAddress.sort(numOrdDesc);
    $('option').each(function() {
      $(this).text(opAddress.pop());
    });
  });

  function numOrdDesc(a, b) {
    return (b - a);
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<select>
    <option>1 Smith Road</option>
    <option>10 Smith Road</option>
    <option>11 Smith Road</option>
    <option>12 Smith Road</option>
    <option>3 Smith Road</option>
    <option>5 Smith Road</option>
</select>

有什么想法，有人可以指出我在正确的文档方向上是什么吗？

Answer 1

这让您有点复杂了。在提供排序依据的同时，您可以在jQuery对象上调用sort()。由于每个选项的文本均以数字开头，因此您只需在其上调用parseInt()即可获得要排序的数值，而不必更新元素的属性。试试这个：

$(function() {
  var $select = $('select');
  var $option = $select.find('option').sort(function(a, b) {
    return parseInt($(a).text(), 10) - parseInt($(b).text(), 10);
  }).appendTo($select).first().prop('selected', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<select>
  <option>1 Smith Road</option>
  <option>10 Smith Road</option>
  <option>11 Smith Road</option>
  <option>12 Smith Road</option>
  <option>3 Smith Road</option>
  <option>5 Smith Road</option>
</select>

Answer 2

要选择新的第一个选项，请将@Rory McCrossan提供的代码稍微更改为以下内容：

$(function() {
  var $select = $('select');
  var $option = $select.find('option').sort(function(a, b) {
    return parseInt($(a).text(), 10) - parseInt($(b).text(), 10);
  }).appendTo($select);
  $("select")[0].options[0].selected = true;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<select>
  <option  >1 Smith Road</option>
  <option>10 Smith Road</option>
  <option >11 Smith Road</option>
  <option>12 Smith Road</option>
  <option>3 Smith Road</option>
  <option>5 Smith Road</option>
</select>

使用jQuery按其开头的数字格式化选择列表

2 个答案: