0

Quiero organizar las tallas en el orden que es ejemplo S-L-XL.

Leí esto (https://www.w3schools.com/howto/howto_js_sort_list.asp), pero no me sirve ya que lo organiza es alfabéticamente.

Cual seria la mejor forma de hacerlo?

Gracias.

<select id="pa_talla" class="" name="attribute_pa_talla" data-attribute_name="attribute_pa_talla" data-show_option_none="yes">
  <option value="">Elige una opción</option>
  <option value="l" class="attached enabled">L</option>
  <option value="s" class="attached enabled">S</option>
  <option value="xl" class="attached enabled">XL</option>
</select>
7
  • 1
    Saludos. Lo que leiste no es que no te sirva; realmente no aplica a tu caso, te falto aplicar tu lógica. Dependiendo tu origen; si es fijo colocarlas tu en orden que necesitas; si proviene de una BD; deberás agregar un campo (digamos) orden (puede ser) de tipo entero al cual le pones de 1 a N según corresponda quieres aparezca; asi con ORDER BY lo recibes como se desplegaran. Commented el 10 jul. 2020 a las 16:53
  • @BetaM Si, señor organizarlo de forma personalizada. Commented el 10 jul. 2020 a las 16:55
  • @RobertoLeOr es una lista de wp, entonces no tengo control de la consulta, por eso recurro al js Commented el 10 jul. 2020 a las 16:58
  • Saludos de nuevo. Si el <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>. Commented el 10 jul. 2020 a las 17:17
  • ¿Quieres ordenar la lista, o unos datos según el valor de la lista seleccionado? Commented el 10 jul. 2020 a las 18:17

1 respuesta 1

0

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.