Sorting dropdown menu alphabetically

Question

I have the following element

<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>

I try to sort it using

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

and it does nothing. I thought maybe it was ordering based on value of the options but it should return text i.e. the tag contents.

score 1 · Answer 1 · answered Aug 21 '19 at 15:04

You can use sort on jquery selector and sort by textContent and localeCompare methods, but then you also need to insert sorted html into select.

You can also use $(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>

Sorting dropdown menu alphabetically

1 Answers1