按值排序下拉列表答案

【问题标题】：Sorting Drop Down List By Value按值排序下拉列表
【发布时间】：2015-04-03 20:45:02
【问题描述】：

我正在尝试使用 jQuery 按值对我的下拉列表之一进行排序。这就是我所拥有的：

var optionSelected = $('select option:contains("New York")');
var myParent= optionSelected.parent('select');

myParent.sort(function(x, y){
return $(x).val() < $(y).val() ? -1 : 1;
})
myParent.get(0).selectedIndex = 0;

在这里我找到单词New York，然后找到那个父项，这将是下拉菜单。然后我将它从 0 排序到最高数字，但它根本没有排序......我错过了什么吗？

【问题讨论】：

myParent 是一个 jQuery 集合，只包含一个元素，<select> 元素。它不是一个选项数组。
解决方法是什么？

标签： jquery sorting

【解决方案1】：

我认为应该这样做。您需要收集选项元素，以便对它们进行排序。一旦你这样做了，你必须把它们放回 DOM；对 jQuery 集合进行排序不会修改 DOM 本身。

$("#sort").click(function() {
  var select = $('select:has(option:contains(New York))');
  var options = select.find("option");
  options.sort(function(x, y) {
    return x.value < y.value ? -1 : 1;
  });
  select.empty().append(options);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="">Select City</option>
  <option>New York</option>
  <option>London</option>
  <option>Albany</option>
  <option>Paris</option>
</select>
<button id="sort">Sort cities</button>

【讨论】：

【解决方案2】：

排序并不是这样工作的。您可能想要做的是刮出值并将它们放入数组中，然后对数组进行排序。例如：

function doSort() {
  var opts = $('#opts');
  var arr = opts.find('option').map(function(i, el) { 
    return el.value;
  });

  var i, len, opt;

  arr = arr.sort();
  opts.empty().hide();
  for (i = 0, len = arr.length; i < len; i++) {
    opt = arr[i];
    opts.append($('<option/>').val(opt).text(opt));
  }
  opts.show();
}

$('#sort').on('click', doSort);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="sort">Click to sort</button>
<select id="opts">
  <option value="New York">New York</option>
  <option value="Arizona">Arizona</option>
  <option value="New Jersey">New Jersey</option>
  <option value="Ohio">Ohio</option>
  <option value="California">California</option>
</select>

【讨论】：