Eh bien, le titre dit tout. Ce que je fais est la création d'un module de produit en vedette. La liste déroulante des tailles est renseignée à l'aide de JSON et j'utilise des guidons pour rendre le code HTML. Je n'ai pas le contrôle sur le fichier JSON. J'ai essayé de trier les valeurs d'option en fonction du texte réel dans les balises d'option, mais je me suis rendu compte que les valeurs d'option étaient erronées par la suite. Alors maintenant, j'essaie de trier les options en fonction de leurs attributs de valeur, mais je ne l'ai pas encore compris. J'essaie de faire quelque chose comme ça:
var selectList = $('#featuredSelectField option');
var newList = [];
var theNewNew = [];
for(var i=0; i<selectList.length; i++){
newList[i]=(selectList[i].value);
}
newList.sort();
for(var i=0; i<newList.length; i++){
theNewNew[i] = $('#featuredSelectField option[value="'+newList[i]+'"]');
selectList[i] = theNewNew[i];
}
et voici le html:
<select id="featuredSelectField" name="addid7617843" size="1">
<option value="" data-value="">Select an option</option>
<option value="10493640" data-value="10493640" data-qty="30" data-mxqty="30">Size 5.5 - $111.99</option>
<option value="10493639" data-value="10493639" data-qty="120" data-mxqty="50">Size 5 - $111.99</option>
<option style="display: none;" disabled="disabled" value="10792504" data-value="10792504" data-qty="0" data-mxqty="0">Size 10 - $111.99 Sold Out</option>
<option value="10493644" data-value="10493644" data-qty="138" data-mxqty="50">Size 7 - $111.99</option>
<option value="10493642" data-value="10493642" data-qty="22" data-mxqty="22">Size 6.5 - $111.99</option>
<option value="10493641" data-value="10493641" data-qty="57" data-mxqty="50">Size 6 - $111.99</option>
<option value="10493648" data-value="10493648" data-qty="99" data-mxqty="50">Size 9 - $111.99</option>
<option value="10493647" data-value="10493647" data-qty="28" data-mxqty="28">Size 8.5 - $111.99</option>
<option value="10493646" data-value="10493646" data-qty="74" data-mxqty="50">Size 8 - $111.99</option>
<option value="11288830" data-value="11288830" data-qty="1" data-mxqty="1">Size 4.5 - $111.99</option>
<option value="10493645" data-value="10493645" data-qty="51" data-mxqty="50">Size 7.5 - $111.99</option>
<option value="10792503" data-value="10792503" data-qty="5" data-mxqty="5">Size 9.5 - $111.99</option>
<option value="11288831" data-value="11288831" data-qty="6" data-mxqty="6">Size 4 - $111.99</option>
</select>
var selectList = $('#featuredSelectField option');
selectList.sort(function(a,b){
a = a.value;
b = b.value;
return a-b;
});
$('#featuredSelectField').html(selectList);
Ici, vous pouvez trouver une démo et comparer les résultats avec l’original: http://jsfiddle.net/74c2M/3/
Ici vous pouvez trouver le bon code: http://jsfiddle.net/74c2M/4/
Bonne chance !
$(function() {
// choose target dropdown
var select = $('select');
select.html(select.find('option').sort(function(x, y) {
// to change to descending order switch "<" for ">"
return $(x).text() > $(y).text() ? 1 : -1;
}));
// select default item after sorting (first item)
// $('select').get(0).selectedIndex = 0;
});