JSFiddle - React, Tailwind, and code Playground

by acdcjunior

HTML

<select multiple>
	<option>9 EE</option>
	<option>9 1/2 EE</option>
	<option>10 EE</option>
	<option>10 1/2 EE</option>
	<option>11 EE</option>
	<option>11 1/2 EE</option>
	<option>9 EEEE</option>
	<option>9 1/2 D</option>
	<option>9 1/2 EEEE</option>
	<option>10 EEEE</option>
	<option>10 1/2 EEEE</option>
	<option>11 EEEE</option>
	<option>9 D</option>
	<option>11 1/2 EEEE</option>
</select>

CSS

select {
    height:600px;
}

JavaScript

$("select").html($("option").sort(function (a, b) {
    var regex = /(\d+)((?: 1\/2)? )([DE]+)/;
    var abreakdown = a.text.match(regex), bbreakdown = b.text.match(regex);
    if (parseInt(abreakdown[1]) === parseInt(bbreakdown[1])) {
        if (abreakdown[3] === bbreakdown[3]) {
            return (abreakdown[2] === bbreakdown[2] ? 0 : (abreakdown[2] < bbreakdown[2] ? -1 : 1));    
        } else {
            return abreakdown[3] < bbreakdown[3] ? -1 : 1;
        }
    } else { return parseInt(abreakdown[1]) - parseInt(bbreakdown[1]); }
}));