JSFiddle - React, Tailwind, and code Playground
HTML
<form action="" method="get">
<label for="elliot">select:</label>
<select name="elliot" multiple="multiple" id="elliot1" style="height:140px;display:block;width: 200px;">
<option>d</option>
<option>Z</option>
<option>avery</option>
<option>5</option>
<option>Alive</option>
<option>8</option>
<option>b</option>
</select>
<button type="button" onclick="javascript:sortSelect(elliot1);">Sort</button>
</form>
JavaScript
function sortSelect(selElem) {
var tmpAry = new Array();
for (var i = 0; i < selElem.options.length; i++) {
tmpAry[i] = new Array();
tmpAry[i][0] = selElem.options[i].text;
tmpAry[i][1] = selElem.options[i].value;
}
tmpAry.sort(
function (a, b) {
var _a = a[0].toLowerCase();
var _b = b[0].toLowerCase();
if (_a < _b) return -1;
if (_a > _b) return 1;
return 0;
});
while (selElem.options.length > 0) {
selElem.options[0] = null;
}
for (var i = 0; i < tmpAry.length; i++) {
var op = new Option(tmpAry[i][0], tmpAry[i][1]);
selElem.options[i] = op;
}
return;
}