Question

我有一个如下选择，我想按字母顺序对此选择进行排序。（使用Jquery）

<select>
  <optgroup label="Potatoes" >
    <option value="1" > Value 1 </option>
    <option value="3" > Value 3 </option>
    <option value="2" > Value 2 </option>
   </optgroup>

   <optgroup label="Banana" >
    <option value="1" > C </option>
    <option value="3" > A </option>
    <option value="2" > S </option>
   </optgroup>
 </select>

我只想对optgroup中的选项进行排序。我不想对optgroup进行排序。

为了拥有：

<select>
  <optgroup label="Potatoes" >
    <option value="1" > Value 1 </option>
    <option value="2" > Value 2 </option>
    <option value="3" > Value 3 </option>
   </optgroup>

   <optgroup label="Banana" >
      <option value="3" > A </option>
      <option value="1" > C </option>
      <option value="2" > S </option>
   </optgroup>
 </select>

我只找到了一种方法来使用optgroups对选择进行排序......

Answer 1

这可能就是您要找的内容：https://jsfiddle.net/dt3b6fmc/

$(function() {
  $('optgroup').each(function() {
    var optgroup = this;
    $( 'option', this ).sort(function(a,b) {
     return $(a).text() > $(b).text();
        }).appendTo(optgroup);
  });
});

这是否满足您的需求？

Answer 2

您可以使用localCompare来比较选项的html字符串

还使用函数将选择器结果作为数组使用toArray()

以及.sort()的使用见bellow片段

＆＃13;

$('select optgroup').each(function(index,elmt){
  result = $(elmt).find("option").toArray().sort((option1, option2) => option1.innerHTML.localeCompare(option2.innerHTML));
  
  $(result).appendTo(elmt);
    
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <optgroup label="Potatoes" >
    <option value="1" > Value 1 </option>
    <option value="3" > Value 3 </option>
    <option value="2" > Value 2 </option>
   </optgroup>

   <optgroup label="Banana" >
    <option value="1" > C </option>
    <option value="3" > A </option>
    <option value="2" > S </option>
   </optgroup>
 </select>

＆＃13;

在Optgroup JQUERY中对选择选项进行排序

2 个答案: