1

I'm looking for clarification on why this issue is happening, and what should be done to avoid this behaviour.

I have a select that will add new options on an event trigger. When this trigger fires I want to create a new option append to the select and then sort all the options in to an order (alphabetical or otherwise, does not matter for this issue). When I do this using the code below, the option is added to the select however the new option becomes selected even though a different option is the "selected" option.

demo 

$(function() {
  var select = $('select');
  select.append("<option value='9'>Nine</option>"); // This will become selected
  select.html(select.find('option').sort(function(x, y) {
    return $(x).text() > $(y).text() ? 1 : -1;
  }));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <select>
    <option>Choose a number</option>
    <option value="3">Three</option>
    <option value="1">One</option>
    <option value="0">Zero</option>
    <option value="2" >Two</option>
    <option value="8" selected="true">Eight</option>
  </select>
</div>

Edit: The issue here is not that the options will be organized in one manner or another. The issue is that after the options are sorted the select displays the wrong option as the selected option. After the JS runs I would expect that Eight is still the selected option.

BrianBest
  • 63
  • 1
  • 7
  • 2
    `n` comes after `Z` in Unicode. Try to sort with `.text().toLowerCase()` instead or use [`localeCompare`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare) – Sebastian Simon Nov 19 '19 at 22:50
  • 1
    Note that jQuery objects (the result of `find`), while array-like (they have numeric indices and a `length` property), should not be treated as arrays in all instances, especially when dealing with methods like `sort`, which mutate the original arrays. – Heretic Monkey Nov 19 '19 at 23:15
  • 1
    It actually picks the last option in the resulting menu that is also below the `selected` option of the original menu. It appears to treat all options below the first `[selected]` one as `[selected]` and while appending just sets and resets the selected option, option by option. Hooray, jQuery is broken! – Sebastian Simon Nov 19 '19 at 23:17
  • 1
    The correct duplicate for this question is [Javascript to sort contents of select element](https://stackoverflow.com/q/278089/215552) (see [this answer](https://stackoverflow.com/a/9200431/215552) for code that preserves your code and resets the selected option). – Heretic Monkey Nov 19 '19 at 23:19
  • 1
    Does this answer your question? [Javascript to sort contents of select element](https://stackoverflow.com/questions/278089/javascript-to-sort-contents-of-select-element) – Goran Stoyanov Nov 20 '19 at 09:27
  • Hey all, yes these solve my question. Thank you @SebastianSimon and Hereitic Monkey for the explanations as well as Goran Stoyanov for pointing to a way to avoid it. To be clear [this is the solution](https://stackoverflow.com/questions/278089/javascript-to-sort-contents-of-select-element/9200431#9200431) we've implemented – BrianBest Nov 20 '19 at 15:20

0 Answers0