我有这个下拉列表,其中定义了属性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/
答案 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); });
答案 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);