如何使用JavaScript函數按ID對選擇元素進行排序？

Question

我具有定義了屬性name和id此下拉列表，並且我還調用了一個函數。

<select id="myid" name="myid" onClick="sortlist(this.id)">
  <option value="volvo">b</option>
  <option value="saab">c</option>
  <option value="mercedes">a</option>
  <option value="audi">d</option>
  <option value="audi">s</option>
  <option value="audi">f</option>
</select>

我想在用戶單擊（或不單擊）時按字母順序對其進行排序，為此我找到了該算法

function sortlist(selElem) {
  var tmpAry = new Array();
  for (var i=0;i<selElem.options.length;i++) {
    tmpAry[i] = new Array();
    tmpAry[i][0] = selElem.options[i].text;
    tmpAry[i][1] = selElem.options[i].value;
  }
  tmpAry.sort();
  while (selElem.options.length > 0) {
    selElem.options[0] = null;
  }
  for (var i=0;i<tmpAry.length;i++) {
    var op = new Option(tmpAry[i][0], tmpAry[i][1]);
    selElem.options[i] = op;
  }
  return;
}

我將元素id傳遞給函數，因為我想對其他下拉列表使用相同的函數，但這不起作用。

你能為我做錯事睜開眼睛嗎？

在此處檢查jsfiddle： http ： //jsfiddle.net/u5YZp/

Answer 1

嘗試這個

的HTML

<select id="myid" name="myid" >
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

腳本

 var mylist = $('#myid');
 var listitems = mylist.children('option').get();
 listitems.sort(function(a, b) {
    var compA = $(a).text().toUpperCase();
    var compB = $(b).text().toUpperCase();
    return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
 })
 $.each(listitems, function(idx, itm) { mylist.append(itm); });

演示

Answer 2

這就是你要做的。 JSFiddle 。

您需要傳遞elem而不是id，並且您的函數應該是全局的

<select id="myid" name="myid" onClick="sortlist(this)">

Answer 3

這是使用普通JavaScript的一種方法：

演示： http ： //jsfiddle.net/u5YZp/4/

var select = document.getElementById('myid');

var sortSelect = function(select) {

  var toArray = function(x) {
    return [].slice.call(x);
  };

  var options = toArray(select.children);

  var sorted = options.sort(function(a, b) {
    return a.value > b.value;
  });

  sorted.forEach(function(op) {
    select.appendChild(op);
  });

  sorted[0].selected = true;
};

sortSelect(select);