如何使用jquery按标签文本的升序排序多个下拉列表

Question

我在表单中有两个下拉菜单，我想按字母顺序对值进行排序。所以我试图通过jquery实现。实际上它按升序工作，但所有下拉值都出现在每个下降中，这意味着重复发生（第一个下拉值出现在第二个下拉中，反之亦然）。

我的代码是

$(function() {
  var select = $('select');
  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/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <select>
    <option selected>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">Eight</option>
  </select>
 
   <select>
    <option selected>Choose a number</option>
    <option value="3">cxbcbcb</option>
    <option value="1">Obcbcbcne</option>
    <option value="0">Zbcbero</option>
    <option value="2">detygey</option>
    <option value="8">eyeyeyy</option>
  </select>
  
  
</div>

Answer 1

这是一个简单的解决方案： -

   $(function() {
       // Loop for each select element on the page.
            $("select").each(function() {             
                // Keep track of the selected option.
                var selectedValue = $(this).val();     
                // Sort all the options by text. I could easily sort these by val.
                $(this).html($("option", $(this)).sort(function(a, b) {
                    if(a.text == "Choose a number") return 1;
                    if(b.text == "Choose a number") return 1;
                    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
                }));     
                // Select one option.
                $(this).val(selectedValue);
            });
    });