Question

我的页面上有多个选择框，我想订购选项的顺序从低到高，但是我无法正常工作。

当页面上有一个选择框时，此方法有效：

# First iteration
d = {'A': 50, 'B': 30, 'C': 20}

# Second iteration
d = {'A': 50, 'B': 20, 'C': 30}

# Third iteration
d = {'A': 30, 'B': 50, 'C': 20}

...

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

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

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

HTML（但其中有多个具有不同的数字）：

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

我做错了什么？是否有可能将优先选择权放在首位？（因此他跳过了选择的第一个选项）

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

jQuery订单选择框与数字

1 个答案: