Jak sortować opcje select2 (wtyczki) alfabetycznie?

Question

Chcę posortować opcje select2 w kolejności alfabetycznej. Mam następujący kod i chciałbym wiedzieć, jak to osiągnąć.

<select name="list" id="mylist" style="width:140px;"> 
    <option>United States</option> 
    <option>Austria</option> 
    <option>Alabama</option>  
    <option>Jamaica</option> 
    <option>Taiwan</option> 
    <option>canada</option> 
    <option>palau</option> 
    <option>Wyoming</option> 
</select> 


$('#mylist').select2({ 
    sortResults: function(results) { return results.sort(); } 
}); 

chcę sortować dane za pośrednictwem 'tekst' ...

Answer 1

Korzystanie z opcji select2 API v3.x - sortResults

elementy można sortować za pomocą opcji sortResults callback:

$('#mylist').select2({ 
 
    sortResults: function(data) { 
 
     /* Sort data using lowercase comparison */ 
 
     return data.sort(function (a, b) { 
 
      a = a.text.toLowerCase(); 
 
      b = b.text.toLowerCase(); 
 
      if (a > b) { 
 
       return 1; 
 
      } else if (a < b) { 
 
       return -1; 
 
      } 
 
      return 0; 
 
     }); 
 
    } 
 
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css" integrity="sha256-ijlUKKj3hJCiiT2HWo1kqkI79NTEYpzOsw5Rs3k42dI=" crossorigin="anonymous" /><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.js" integrity="sha256-7A2MDY2eGSSUvgfbuH1IdzYk8qkEd3uzwiXADqPDdtY=" crossorigin="anonymous"></script> 
 
<select name="list" id="mylist" style="width:140px;"> 
 
    <option>United States</option> 
 
    <option>Austria</option> 
 
    <option>Alabama</option>  
 
    <option>Jamaica</option> 
 
    <option>Taiwan</option> 
 
    <option>canada</option> 
 
    <option>palau</option> 
 
    <option>Wyoming</option> 
 
</select>

Korzystanie select2 options API v4.0 - sort

można sortować elementy używając opcji sorter callback:

$('#mylist').select2({ 
 
    sorter: function(data) { 
 
     /* Sort data using lowercase comparison */ 
 
     return data.sort(function (a, b) { 
 
      a = a.text.toLowerCase(); 
 
      b = b.text.toLowerCase(); 
 
      if (a > b) { 
 
       return 1; 
 
      } else if (a < b) { 
 
       return -1; 
 
      } 
 
      return 0; 
 
     }); 
 
    } 
 
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" integrity="sha256-xqxV4FDj5tslOz6MV13pdnXgf63lJwViadn//ciKmIs=" crossorigin="anonymous" /><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js" integrity="sha256-FA14tBI8v+/1BtcH9XtJpcNbComBEpdawUZA6BPXRVw=" crossorigin="anonymous"></script> 
 
<select name="list" id="mylist" style="width:140px;"> 
 
    <option>United States</option> 
 
    <option>Austria</option> 
 
    <option>Alabama</option>  
 
    <option>Jamaica</option> 
 
    <option>Taiwan</option> 
 
    <option>canada</option> 
 
    <option>palau</option> 
 
    <option>Wyoming</option> 
 
</select>

---

Czysta javascript (odpowiedź stary)

miałem innego podejścia ogólnego (możesz użyć wartości lub atrybutu do sortowania elementów), ale bez użycia jQuery:

var select = document.getElementById("mylist"); 
 
var options = []; 
 
// Get elements to sort 
 
for (var i in select.childNodes) { 
 
    var tagName = select.childNodes[i].tagName; 
 
    if (typeof(tagName) != 'undefined' && 
 
     tagName.toLowerCase() == "option") { 
 
     /* Field "content" will be used to sort options */ 
 
     options.push({ 
 
      node: select.childNodes[i], 
 
      content: select.childNodes[i].innerHTML, 
 
     }); 
 
    } 
 
} 
 
// Empty select 
 
while (select.firstChild) { 
 
    select.removeChild(select.firstChild); 
 
} 
 
// Sort function 
 
function sort(a, b){ 
 
    var aa = a.content.toLowerCase(); 
 
    var bb = b.content.toLowerCase(); 
 
    if(aa > bb) { 
 
     return 1; 
 
    } else if (aa < bb) { 
 
     return -1; 
 
    } 
 
    return 0; 
 
} 
 
// Sort array using previous function 
 
options.sort(sort); 
 
// Add the nodes again in order 
 
for (var i in options) { 
 
    select.appendChild(options[i].node); 
 
}

<select name="list" id="mylist" style="width:140px;"> 
 
    <option>United States</option> 
 
    <option>Austria</option> 
 
    <option>Alabama</option>  
 
    <option>Jamaica</option> 
 
    <option>Taiwan</option> 
 
    <option>canada</option> 
 
    <option>palau</option> 
 
    <option>Wyoming</option> 
 
</select>

z jQuery

var selectList = $('#mylist option'); 
 
function sort(a,b){ 
 
    a = a.text.toLowerCase(); 
 
    b = b.text.toLowerCase(); 
 
    if(a > b) { 
 
     return 1; 
 
    } else if (a < b) { 
 
     return -1; 
 
    } 
 
    return 0; 
 
} 
 
selectList.sort(sort); 
 
$('#mylist').html(selectList);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 
<select name="list" id="mylist" style="width:140px;"> 
 
    <option>United States</option> 
 
    <option>Austria</option> 
 
    <option>Alabama</option>  
 
    <option>Jamaica</option> 
 
    <option>Taiwan</option> 
 
    <option>canada</option> 
 
    <option>palau</option> 
 
    <option>Wyoming</option> 
 
</select>

Dzięki @Narendra Sisodia dla końcówki jQuery.

Pozdrawiam!

Answer 2

Wybór2 wersji 4.0 został przemianowany sortResults do sorter, więc można zrobić:

$('#input').select2({ 
    sorter: function(data) { 
     return data.sort(); 
    } 
})