A pesar de que en los comentarios mencionas que lo haz conseguido, te dejo una forma mucho más sostenible en el tiempo, ya que si la cantidad de tallas aumenta (por ejemplo para zapatos, donde tendrás muchos valores a ordenar) se dificultará un poco la mantenibilidad.
La idea consiste en definir un atributo data
para cada option
y así definir su posición dentro del select
, posteriormente solo llamarías a la función orderById
pasando la id de un select
que posea los atributos data y este los ordenará.
Para definir la posición simplemente actualiza el valor dentro del data-position=""
function orderById (id){
var select = $('#'+id)
var elements = $('#'+id+' option')
select.html("")
for(i = 0; i < elements.length; i++){
elements.each((index, element) => {
if($(element).data('position') == i){
select.append(element)
}
})
}
}
orderById('pa_talla')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="pa_talla" class="" name="attribute_pa_talla" data-attribute_name="attribute_pa_talla" data-show_option_none="yes">
<option data-position="0" value="">Elige una opción</option>
<option data-position="2" value="l" class="attached enabled">L</option>
<option data-position="1" value="s" class="attached enabled">S</option>
<option data-position="3" value="xl" class="attached enabled">XL</option>
</select>
orden
(puede ser) de tipoentero
al cual le pones de 1 a N según corresponda quieres aparezca; asi conORDER BY
lo recibes como se desplegaran.<select>
así te llega; será necesario (si hay forma) que antes de que el usuario interactue obtengas datos de los<option>
, vacíes el<select>
, ordenes los datos (según requieras; el proceso puede ser diverso) y vuelvas a poblar el<select>
.