Quiero ordenar las opciones de mp4 juntas como si no debería haber una opción de webm cuando, a menos que no quede otra opción de mp4, podemos poner la opción de webm
<select id="download-options"> <option value="18">mp4 - 360p</option> <option value="247">webm - 720p (no audio)</option> <option value="398">mp4 - 720p (no audio)</option> <option value="136">mp4 - 720p (no audio)</option> <option value="135">mp4 - 480p (no audio)</option> <option value="244">webm - 480p (no audio)</option> <option value="397">mp4 - 480p (no audio)</option> </select>Como puede ver, hay mp4 y webm mezclados, por lo que debe ordenar, pero ¿cómo? también debemos asegurarnos de no dar un valor de opción a otra opción
Quiero algo como esto
<select id="download-options"> <option value="18">mp4 - 360p</option> <option value="398">mp4 - 720p (no audio)</option> <option value="136">mp4 - 720p (no audio)</option> <option value="135">mp4 - 480p (no audio)</option> <option value="397">mp4 - 480p (no audio)</option> <option value="247">webm - 720p (no audio)</option> <option value="244">webm - 480p (no audio)</option> </select>esta es una solución que puedo pensar ahora
function sort(el){ var orderedArr = [...el.children].sort((a,b)=>{ return a.innerText.substr(0,3) == "mp4" ? -1:1 }) el.innerHTML = "" orderedArr.forEach(each=>{ el.appendChild(each) }) } sort(document.querySelector("select")) <select id="download-options"> <option value="18">mp4 - 360p</option> <option value="247">webm - 720p (no audio)</option> <option value="398">mp4 - 720p (no audio)</option> <option value="136">mp4 - 720p (no audio)</option> <option value="135">mp4 - 480p (no audio)</option> <option value="244">webm - 480p (no audio)</option> <option value="397">mp4 - 480p (no audio)</option> </select> function sortItems(item) { var options = item.options; Array.prototype.sort.call(options, function (x, y) { var xText = x.text.toLowerCase(); var yText = y.text.toLowerCase(); if (xText < yText) { return -1; } else if (xText > yText) { return 1; } else { return 0; } }); } sortItems(document.getElementById('download-options')); console.clear() <select id="download-options" multiple="multiple"> <option value="18">mp4 - 360p</option> <option value="247">webm - 720p (no audio)</option> <option value="398">mp4 - 720p (no audio)</option> <option value="136">mp4 - 720p (no audio)</option> <option value="135">mp4 - 480p (no audio)</option> <option value="244">webm - 480p (no audio)</option> <option value="397">mp4 - 480p (no audio)</option> </select>