Question

我需要将此选项命名为按字母顺序排列（已经工作）和名称数量。

这是我的select：

的示例

<select id="test" name="test">
   <option value="a">a - 10 names</option>
   <option value="b">b - 17 names</option>
   <option value="c">c - 4 names</option>
</select>

将此代码设为正确的字母顺序。

<script>
$(document).ready(function() {
  $('#btnSort').click(function(e) {
    $("#test").html($('#test option').sort(function(x, y) {
        return $(x).text() < $(y).text() ? -1 : 1;
    }))
    $("#test").get(0).selectedIndex = 0;
    e.preventDefault();
  });
});
</script>

但我如何根据名字的数量订购？

示例：

<select id="test" name="test">
   <option value="c">c - 4 names</option>
   <option value="a">a - 10 names</option>
   <option value="b">b - 17 names</option>
</select>

我试过这个jquery代码但是没有工作：

<script>
$(document).ready(function() {
  $('#btnSort').click(function(e) {
    $("#test").html($('#test option').sort(function(x, y) {
        return $(x).text().split(' - ') < $(y).text().split(' - ') ? -1 : 1;
    }))
    $("#test").get(0).selectedIndex = 0;
    e.preventDefault();
  });
});
</script>

感谢所有

Answer 1

如果您的内部选项只有一个，则此类型适用于您：

,MALE,FEMALE
,24.89,28.46
,55.05,1:02.78
,2:02.46,2:17.08
,4:23.01,4:49.58
,9:09.20,9:58.57
,17:35.59,19:10.28
,26.87,30.94
,1:00.81,1:08.89
,2:17.67,2:34.18
,29.09,32.23
,1:03.00,1:11.02
,2:19.78,2:33.72
,31.56,37.1
,1:10.62,1:21.23
,2:36.40,2:54.79
,2:20.00,2:35.75
,4:59.87,5:35.37

Answer 2

您可以使用正则表达式从字符串中查找数字，并将它们与短信进行比较，如下所示。

$('#btnSort').click(function(e) {
    $("#test").html($('#test option').sort(function(x, y) {
          var numX = $(x).text().match(/\d/g).join(''),
              numY = $(y).text().match(/\d/g).join('');
           
          return numX - numY;
    }));
  
  $("#test option").first().prop('selected', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test" name="test">  
   <option value="b">b - 17 names</option>
   <option value="c">c - 4 names</option>
   <option value="a">a - 10 names</option>
</select>

<button id="btnSort">Sort</button>

Answer 3

您需要首先从选项文本中获取数字，然后需要按如下方式进行比较：

＆＃13;

$(document).ready(function() {
  //get the number out of the option text
  function getNumber(text){
    var arr = text.split(' - ');
    var lastPart = arr[1];
    var numberPart = lastPart.replace(" names","");
    return parseInt(numberPart);
  }
  
  $('#btnSort').click(function(e) {
    $("#test").html($('#test option').sort(function(x, y) {
      return getNumber($(x).text()) < getNumber($(y).text()) ? -1 : 1;
    }))
    $("#test").get(0).selectedIndex = 0;
    e.preventDefault();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="test" name="test">
  <option value="c">e - 14 names</option>
  <option value="a">a - 10 names</option>
  <option value="c">c - 4 names</option>
  <option value="b">b - 17 names</option>
</select>
<button id="btnSort">Sort</button>

＆＃13;

Answer 4

分割字符串时如下：

c - 4 names

使用：

$(x).text().split(' - ')

您获得了一个包含两个值的数组：

C
4个名字

如果您想使用此策略，则需要考虑：

使用x.textContent而不是$（x）.text（）
获取第二个数组元素
解析此值

示例：

＆＃13;

$(document).ready(function() {
  $('#btnSort').on('click', function(e) {
    $("#test option").sort(function(x, y) {
      var iX = parseInt(x.textContent.split(' - ')[1]);
      var iY = parseInt(y.textContent.split(' - ')[1]);
      return (isNaN(iX) ? 0 : iX)  - (isNaN(iY) ? 0 : iY);
    }).appendTo('#test');
    $('#test').prop('selectedIndex', 0);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" id="btnSort">Sort</button>
<select id="test" name="test">
    <option value="b">b - 17 names</option>
    <option value="c">c - 4 names</option>
    <option value="a">a - 10 names</option>
</select>

＆＃13;

订单下拉项目的文字

4 个答案: