带有数字的jquery订单选择框

Question

我的页面上有多个选择框，我想将选项中的数字从低到高排序，但我无法正常工作。

当页面上有一个选择框时，这是有效的：

var selectList = jQuery('select option');
selectList.sort(function(a, b) {
      a = a.value;
      b = b.value;

    return a - b;
});
jQuery('select').html(selectList);

所以我尝试了这个，但这根本不起作用：

jQuery('select').each(function(i, obj) {
    var selectList = jQuery('select option');
    selectList.sort(function(a,b){
        a = a.value;
        b = b.value;

        return a-b;
    });
}).html(selectList);

HTML（但随后有多个不同的数字）：

<select>
    <option value="">Selecteer</option>
    <option value="">1000</option>
    <option value="">43</option>
    <option value="">5356</option>
    <option value="">22</option>
    <option value="">6</option>
</select>

我做错了什么？有没有可能它总是把第一个选项放在第一位？ （所以他跳过了选择的第一个选项）

Answer 1

您的目标内容不是价值，而是文本。所以你应该使用.text() 而不是.value

如果你有一个选择元素，请使用

$('select option').sort(function(a,b){
  return $(a).text()-$(b).text();
}).appendTo("select");

$('select option').sort(function(a,b){
  return $(a).text()-$(b).text();
}).appendTo("select");
$('select option:first-child').prop('selected', true);
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option value="">Selecteer</option>
  <option value="">1000</option>
  <option value="">43</option>
  <option value="">5356</option>
  <option value="">22</option>
  <option value="">6</option>
</select>

但是如果你有多个选择使用

$('select').each(function(){
  $('option', this).sort(function(a,b){
    return $(a).text()-$(b).text();
  }).appendTo(this);
});

$('select').each(function(){
  $('option', this).sort(function(a,b){
    return $(a).text()-$(b).text();
  }).appendTo(this);
});
$('select option:first-child').prop('selected', true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option value="">Selecteer</option>
  <option value="">1000</option>
  <option value="">43</option>
  <option value="">5356</option>
  <option value="">22</option>
  <option value="">6</option>
</select>
<select>
  <option value="">Selecteer</option>
  <option value="">1000</option>
  <option value="">43</option>
  <option value="">5356</option>
  <option value="">22</option>
  <option value="">6</option>
</select>

请注意，如果您想将第一个选项设置为selected，请在排序后使用底部代码

$('select option:first-child').prop('selected', true);