问使用jQuery的自定义下拉选项排序
EN

Stack Overflow用户

提问于 2020-04-27 14:01:07

回答 2查看 408关注 0票数 3

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

<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>

下拉列表将有两种类型的条目，以数字开头的条目和以字母开头的条目。我想首先简单地按字母顺序对以字母开头的内容进行排序，并将它们放在下拉列表的开头。然后，一些以数字开头的单词在结尾偶尔会有一个或两个字母。有字母的将被认为比没有字母的多一步，并将放置在后面，因此顺序将是14 > 14b > 15，例如

我搜索并找到了几篇关于如何对列表/下拉列表进行排序的帖子，但这有点复杂，我似乎不能自己想出如何将所有东西拼凑在一起。有人能帮帮忙吗？谢谢!

javascript

jquery

arrays

sorting

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-04-27 15:11:23

我们可以这样做(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]);

function mySort(a,b) {  
  const [a_val, b_val]  = [a.value, b.value];
  
  if (Math.abs(parseInt(a_val) - parseInt(b_val)) >= 0){
    //both are numbers (or at least start with numbers)
    if (parseInt(a_val) - parseInt(b_val) == 0){
      //then we need to compare the letters after too:
      const a_letters = a_val.replace(parseInt(a_val), "");
      const b_letters = b_val.replace(parseInt(b_val), "");
      return a_letters.localeCompare(b_letters)
    } else {
      //the letters after don't matter for comparison:
      return parseInt(a_val) - parseInt(b_val)
    }        
  } else if(Math.abs(parseInt(a_val)) >= 0) {
    //only a is a number, so b goes first:
    return 1;    
  } else if(Math.abs(parseInt(b_val)) >= 0) {
    //only b is a number, so a goes first:
    return -1;    
  } else {
    //both are letters only so do a textual comparison:
    return a_val.localeCompare(b_val)
  }  
    
}

<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>

输出：

票数 1

Stack Overflow用户

发布于 2020-04-27 14:51:51

尝尝这个

function 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);
        if(isNaN(nx) && isNaN(ny))
           { r = x > y ? 1 : -1}
        else if(isNaN(nx) || isNaN(ny))
           { r = x < y ? 1 : (x > y ? -1 : 0); }
        else
            r = nx - ny;
    }
    return r || ra.length - rb.length;
}


$("#models").html(
Array.prototype.slice.call($("#models")[0].querySelectorAll("option"), 0).sort(natcmp)
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>