Je veux trier les options select2 par ordre alphabétique. J'ai le code suivant et je voudrais savoir comment cela peut être réalisé:
<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(); }
});
Je veux trier les données via 'texte'.
sortResults
)Vous pouvez trier les éléments à l'aide de l'option de rappel sortResults
avec String.localeCompare()
:
$( '#mylist' ).select2({
/* Sort data using localeCompare */
sortResults: data => data.sort((a, b) => a.text.localeCompare(b.text)),
});
<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>
sorter
)Vous pouvez trier les éléments à l'aide de l'option de rappel sorter
:
$('#mylist').select2({
sorter: data => data.sort((a, b) => a.text.localeCompare(b.text)),
});
<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>
J'avais une autre approche à usage général (vous pouvez utiliser une valeur ou un attribut pour trier les éléments) sans utiliser jQuery:
var select = document.getElementById("mylist");
var options = [];
// Get elements to sort
document.querySelectorAll('#mylist > option').forEach(
option => options.Push(option)
);
// Empty select
while (select.firstChild) {
select.removeChild(select.firstChild);
}
// Sort array using innerText (of each option node)
options.sort(
(a, b) => a.innerText.localeCompare(b.innerText)
);
// Add the nodes again in order
for (var i in options) {
select.appendChild(options[i]);
}
<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>
Merci @ Narendra Sisodia pour le conseil jQuery:
/* Get options */
var selectList = $('#mylist > option');
/* Order by innerText (case insensitive) */
selectList.sort(
(a, b) => a.innerText.localeCompare(b.innerText)
);
/* Re-do select HTML */
$('#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>
Select2 version 4.0 a renommé sortResults
en sorter
, vous pouvez donc faire:
$('#input').select2({
sorter: function(data) {
return data.sort();
}
})
Jetez un oeil dans ce code:
$('#your_select').select2({
/* Sort data using lowercase comparison */
sorter: data => data.sort((a,b) => a.text.toLowerCase() > b.text.toLowerCase() ? 0 : -1)
});
J'espère que cela vous a été aidé! =)
Cela a été tiré du numéro de github, donc tout le mérite revient à l'affiche originale, mais c'est ce qui a fonctionné pour moi.
Version 4.x
$( '#mylist' ).select2({
sorter: function(data) {
return data.sort(function (a, b) {
if (a.text > b.text) {
return 1;
}
if (a.text < b.text) {
return -1;
}
return 0;
});
}
});