按字母顺序排序下拉菜单[重复]答案

【问题标题】：Sorting dropdown menu alphabetically [duplicate]按字母顺序排序下拉菜单[重复]
【发布时间】：2019-12-26 21:31:18
【问题描述】：

我有以下元素

<li id="li_15" class="dropdown dropdown-alpha highlighted" style="">
        <label class="description" for="element_15">Name <span id="required_15" class="required">*</span></label>
        <div>
<select class="element select medium" id="element_15" name="element_15"> 
<option value="" selected="selected"></option>
<option value="4">Amnesty International</option>
<option value="5">Animal First aid and rehabilitation</option>
<option value="6">Blogging</option>
<option value="7">Catholic</option>
<option value="8">Cheese</option>
<option value="9">Conservatives</option>
<option value="10">Dad dancing</option>
<option value="11">Documentary</option>
<option value="12">East Africa</option>
<option value="13">Emirati</option>
<option value="14">Endangered species</option>
<option value="15">Green Party</option>
<option value="16">Harry Potter</option>
<option value="17">Italian</option>
<option value="18">Kuwait</option>
<option value="19">Mandarin</option>
<option value="20">Motorsports</option>
<option value="21">Polish</option>
<option value="22">Psychology</option>
<option value="23">Games</option>
<option value="24">Ahem</option>
<option value="25">The Breakfast club</option>
<option value="26">Trent Forensics</option>
<option value="27">Wine</option>
<option value="28">YouTube</option>
<option value="29">Engineering</option>
<option value="30">Construction</option>

        </select>
        </div> 
        </li>

我尝试使用

对其进行排序

$(".dropdown-alpha option").sort(function (a, b) {
    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
})

它什么也不做。我想也许它是根据选项的值排序的，但它应该返回文本，即标签内容。

【问题讨论】：

标签： javascript jquery sorting

【解决方案1】：

您可以在 jquery 选择器上使用sort 并按textContent 和localeCompare 方法进行排序，但是您还需要将排序后的html 插入select。

你也可以使用$(a).text().localeCompare($(b).text())

const sorted = $('select option').sort((a, b) => {
  return a.textContent.localeCompare(b.textContent)
});

$("select").html(sorted).val('')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="description" for="element_15">Name <span id="required_15" class="required">*</span></label>
<div>
  <select class="element select medium" id="element_15" name="element_15">
    <option value="" selected="selected"></option>
    <option value="4">Amnesty International</option>
    <option value="5">Animal First aid and rehabilitation</option>
    <option value="6">Blogging</option>
    <option value="7">Catholic</option>
    <option value="8">Cheese</option>
    <option value="9">Conservatives</option>
    <option value="10">Dad dancing</option>
    <option value="11">Documentary</option>
    <option value="12">East Africa</option>
    <option value="13">Emirati</option>
    <option value="14">Endangered species</option>
    <option value="15">Green Party</option>
    <option value="16">Harry Potter</option>
    <option value="17">Italian</option>
    <option value="18">Kuwait</option>
    <option value="19">Mandarin</option>
    <option value="20">Motorsports</option>
    <option value="21">Polish</option>
    <option value="22">Psychology</option>
    <option value="23">Games</option>
    <option value="24">Ahem</option>
    <option value="25">The Breakfast club</option>
    <option value="26">Trent Forensics</option>
    <option value="27">Wine</option>
    <option value="28">YouTube</option>
    <option value="29">Engineering</option>
    <option value="30">Construction</option>
  </select>
</div>

【讨论】：