使用select框上下移动选项对数据进行排序是我们常用做法，但是一般网上所看到的都大同小异。基本上都是使用insertBefore来完成。但是经过本人测试，如果选项数超过10个，移动一个选项到顶部都需要差不多一秒的时间，如果同时移动多个选项，那速度就比较惊人了。所以，我认为这种方法不可取。
本人采用的做法就是：
第一步：获取所有选项对象
第二步：对选项对象进行排序（在排序过程中，使用对象的克隆对象【很重要】）
第三步：清空select里面的所有选项
第四步：插入克隆的对象
实例如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Select 排序，移动等</title>
</head>
<body >
<br/>
<table>
<tr >
<td>
<select id="ObjSelect" name=ObjSelect size=6 class="ecv_autoSizeDropDown" style="height:300px;width:100px" multiple >
<option value="11">test11</option>
<option value="12">test12</option>
<option value="13">test13</option>
<option value="14">test14</option>
<option value="15">test15</option>
<option value="16">test16</option>
<option value="11">test111</option>
<option value="12">test122</option>
<option value="13">test133</option>
<option value="14">test144</option>
<option value="15">test155</option>
<option value="16">test166</option>
<option value="11">test1111</option>
<option value="12">test1222</option>
<option value="13">test1333</option>
<option value="14">test1444</option>
<option value="15">test1555</option>
<option value="16">test1666</option>
</select>
</td>
<td width="30px">
<input type=button value="top(使用insertBefore)" οnclick="moveToTop(document.getElementById('ObjSelect'))" > <br><br>
<input type=button value="top(排序再生成)" οnclick="moveToTop1(document.getElementById('ObjSelect'))" > <br><br>
</td>
</tr>
</table>
<script language=javascript>
function moveToTop(selectObj){
var theObjOptions=selectObj.options;
var oOption=null;
for(var i=0;i<theObjOptions.length;i++) {
if( theObjOptions[i].selected && oOption) {
selectObj.insertBefore(theObjOptions[i],oOption);
}
else if(!oOption && !theObjOptions[i].selected) {
oOption=theObjOptions[i];
}
}
}
function moveToTop1(selectObj){
//在重新渲染前，对所有的排序，再重新生成可能速度更快
var theObjOptions=selectObj.options;
var newOptionsSelected = [] ;
var newOptionsUnSelected = [] ;
var oOption=null;
//第一步，循环选中的
for(var i=0;i<theObjOptions.length;i++) {
var option = theObjOptions[i] ;
if( option.selected ) {
newOptionsSelected.push(option.cloneNode(true)) ;
}else{
newOptionsUnSelected.push(option.cloneNode(true));
}
}
//数组合并
var os = newOptionsSelected.concat(newOptionsUnSelected) ;
//重新生成
selectObj.options.length = 0;
//alert(os.length) ;
for(var i=0 ;i<os.length ;i++){
//alert(os[i]);
selectObj.appendChild(os[i]);
}
}
</script>
</body>
</html>
2940
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
