Question

我正在尝试使用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分类到最高的数字，但它根本没有排序......我错过了什么？

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

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

按值排序下拉列表

2 个答案: