JSFiddle - React, Tailwind, and code Playground

HTML

<select id="ddlList">
  <option value='1'>小喬</option>
  <option value='2'>BBB</option>
  <option value='3'>AAA</option>
  <option value='4'>小涵</option>
  <option value='5'>CCC</option>
</select>
<br/><br/>
<input type="button" id="btnSort" Value="依照文字排列" />

CSS

body
{
    padding: 10px;
    font-family:Calibri;
    font-size: 12pt;
}

input
{
    font-family:Calibri;
    font-size: 12pt;
}

select
{
    font-family:Calibri;
    font-size: 12pt;
    color: Black;
    background-color: Lightblue;
}

JavaScript

$(document).ready(function() {
		var $defaultVal =  $("#ddlList").val();
    $('#btnSort').click(function(e) {
        $("#ddlList").html($('#ddlList option').sort(function(x, y) {
            return $(x).text() < $(y).text() ? -1 : 1;
        }))
        $("#ddlList").val($defaultVal);
        e.preventDefault();
    });
});