JSFiddle - React, Tailwind, and code Playground
HTML
<select id="signed_by">
<option value="1">Test</option>
</select>
JavaScript
$(function() {
var selectedOption = "19084";
var select = $('#signed_by');
options = select[0].options;
$('option', select).remove();
var obj = {
"19081": "Becky Doe",
"19082": "Aaron Smith",
"19084": "Darren Hayes",
"19083": "Adam Schwedler"
};
$.each(obj, function(val, text) {
options[options.length] = new Option(text, val);
});
// convert OPTIONs NodeList to an Array
// - keep in mind that we're using the original OPTION objects
var ary = (function(nl) {
var a = [];
for (var i = 0, len = nl.length; i < len; i++) {
a.push(nl.item(i));
}
return a;
})(options);
// sort OPTIONs Array
ary.sort(function(a, b) {
return a.text < b.text ? -1 : a.text > b.text ? 1 : 0;
});
// remove all OPTIONs from SELECT (don't worry, the original
// OPTION objects are still referenced in "ary") ;-)
options.length = 0;
// (re)add re-ordered OPTIONs to SELECT
select.html(ary);
select.prepend($('<option />').text('-- Select Signed By --').val(''));
select.val(selectedOption);
});