Tengo un cuadro de selección html creado dinámicamente que necesito ordenar alfabéticamente pero ignoro el marcador de posición/opción que dice Seleccionar...
He cansado lo siguiente desde aquí, pero me di cuenta de que el cuadro de selección no tiene una identificación, solo un nombre
¿algunas ideas?
<select style="width:250px" name="sortbyco"> <option value="">Select2</option> <!--I would like to keep this at the top--> <option value="40934">Africa (CAF)</option> <option value="44624">Asia (AFC)</option> <option value="29521">Europe (UEFA)</option> <option value="43099">North & Central America (CONCACAF)</option> <option value="38731">South America (CONMEBOL)</option> <option value="46617">Oceania (OFC)</option> <option value="40934">Africa (CAF2)</option> </select> $("#sortbyco").append($("#sortbyco option:gt(0)").sort(function (a, b) { return a.text == b.text ? 0 : a.text < b.text ? -1 : 1; }));Aquí hay un fragmento sin JQuery. El selector ahora tiene una identificación para un uso más fácil en un selector css. Se ordena una copia de la matriz de opciones sin la opción vacía y se vuelve a agregar al selector.
const selector = document.querySelector(`#sortbyco`); // create an array of all options except the empty one const opts = [...selector.querySelectorAll(`option:not([value='']`)]; // copy to a sorted array (note: use localeCompare to compare strings) const sortedOpts = opts.sort( (a, b) => a.textContent.localeCompare(b.textContent) ); // remove the old options from the selector opts.forEach(opt => opt.remove()); // add the sorted options to the selector sortedOpts.forEach( (opt, i) => selector.appendChild(opt) ); <select style="width:250px" id="sortbyco"> <option value="46617">Oceania (OFC)</option> <option value="43099">North & Central America (CONCACAF)</option> <option value="40934">Africa (CAF)</option> <option value="44624">Asia (AFC)</option> <option value="29521">Europe (UEFA)</option> <option value="40934">Africa (CAF2)</option> <option value="38731">South America (CONMEBOL)</option> <option value="" selected>Select</option> <!-- ▲ will be at the top after sorting --> </select>Aquí hay un ejemplo de jQuery.
$(function() { var opts = $("#sortbyco > option:not([value=''])").detach(); opts.sort(function(a, b) { return $(a).text() == $(b).text() ? 0 : $(a).text() < $(b).text() ? -1 : 1; }); $("#sortbyco").append(opts); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select style="width:250px" name="sortbyco" id="sortbyco"> <option value="">Select2</option> <!--I would like to keep this at the top--> <option value="40934">Africa (CAF)</option> <option value="44624">Asia (AFC)</option> <option value="29521">Europe (UEFA)</option> <option value="43099">North & Central America (CONCACAF)</option> <option value="38731">South America (CONMEBOL)</option> <option value="46617">Oceania (OFC)</option> <option value="40934">Africa (CAF2)</option> </select> Esto usa .sort() en la matriz de objetos jQuery.