如何使用javascript函数按ID排序选择元素?

时间:2013-12-23 06:26:25

标签: javascript

我有这个下拉列表,其中定义了属性nameid,我也调用了一个函数。

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

3 个答案:

答案 0 :(得分: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); });

DEMO

答案 1 :(得分:1)

这就是你必须要做的。 JSFiddle

你需要传递elem,而不是id,你的功能应该是全局的

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

答案 2 :(得分:1)

这是一种在纯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);