I'm want to sort the mp4 options together like there should be no webm option when unless no other mp4 option is left then we can put webm option
<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>
As you can see there is mp4 and webm mixed, so need to do sort but how? also we need to make sure that we don't give one option value to other option
I want something like this
<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>
this is one solution i can think of now
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>