JSFiddle - React, Tailwind, and code Playground

by skram

HTML

<select id="user_department_id" name="user[department_id]">

 <option value=""> </option>

 <option value="10">G</option>
 <option value="12">Z</option>
 <option value="9">AAAAA</option>
 <option value="11">BBBBB</option>

 <option value="" class="ig">--</option>
 <option value="add" class="ig">Add a New</option>
</select>

<button>Sort</button>

JavaScript

$(document).ready(function() {

    $('button').click (function () {
        
        var selElem = document.getElementById('user_department_id')
        var tmpAry = [];
        var igOpt = [];
        for (var i = 0; i < selElem.options.length; i++) {
            
            if ($(selElem.options[i]).hasClass('ig')) {
                igOpt.push([selElem.options[i].text, 
                            selElem.options[i].value]);
                continue;
            }
            tmpAry[i] = new Array();
            tmpAry[i][0] = selElem.options[i].text;
            tmpAry[i][1] = selElem.options[i].value;
        }
        tmpAry.sort();
        //merge with ignored options
        tmpAry = tmpAry.concat(igOpt);
        //remove options
        $(selElem).empty();
        
        for (var i = 0; i < tmpAry.length; i++) {
            var op = new Option(tmpAry[i][0], tmpAry[i][1]);
            selElem.options[i] = op;
        }
    });

});