Un caso piuttosto frequente in cui ci si può imbattere durante lo sviluppo di applicazioni web è quello di trovare gli elementi di una “select” ordinati in maniera non ottimale, probabilmente a causa di una query nel DB per la quale non è stato gestito un ORDER BY per una svista o anche per evitare di sovraccaricare il server MYSQL in query su colonne non indicizzate.
Ad esempio nel caso di una select di questo tipo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<select id="sizeSelect" name="sizeSelect"> <option value="0" data-value="">Seleziona</option> <option value="10493640" data-value="10493640" data-qty="30" data-mxqty="30">Misura 5.5 - €111.99</option> <option value="10493639" data-value="10493639" data-qty="120" data-mxqty="50">Misura 5 - €111.99</option> <option value="10792504" data-value="10792504" data-qty="12" data-mxqty="0">Misura 10 - €111.99 </option> <option value="10493644" data-value="10493644" data-qty="138" data-mxqty="50">Misura 7 - €111.99</option> <option value="10493642" data-value="10493642" data-qty="22" data-mxqty="22">Misura 6.5 - €111.99</option> <option value="10493641" data-value="10493641" data-qty="57" data-mxqty="50">Misura 6 - €111.99</option> <option value="10493648" data-value="10493648" data-qty="99" data-mxqty="50">Misura 9 - €111.99</option> <option value="10493647" data-value="10493647" data-qty="28" data-mxqty="28">Misura 8.5 - €111.99</option> <option value="10493646" data-value="10493646" data-qty="74" data-mxqty="50">Misura 8 - €111.99</option> <option value="10288831" data-value="11288830" data-qty="1" data-mxqty="1">Misura 4.5 - €111.99</option> <option value="10493645" data-value="10493645" data-qty="51" data-mxqty="50">Misura 7.5 - €111.99</option> <option value="10792503" data-value="10792503" data-qty="5" data-mxqty="5">Misura 9.5 - €111.99</option> <option value="10288830" data-value="11288831" data-qty="6" data-mxqty="6">Misura 4 - €111.99</option> </select> |
Il cui output:
non è certo ottimale per la USER EXPERIENCE in un sito ecommerce serio.. Le Options di una select si possono riordinare con una semplice funzione javascript in combinazione con jQuery:
1 2 3 4 5 6 7 8 9 |
var selectList = $('#sizeSelect option'); selectList.sort(function(a,b){ a = a.value; b = b.value; return a-b; }); $('#sizeSelect').html(selectList).val($("#sizeSelect option:first").val()); |
…infatti la stessa select processata dalla funzione:
ha le options in un ordine decisamente migliore !
Leave A Comment