Javascript - Select操作大集合

核心提示： 这里借助Array对象的sort方法进行操作，sort方法接受一个function参数，Javascript - Select操作大集合(3)，可以在这个function里定义排序时使用的算法逻辑，array.sort([compareFunction]) 里compareFunction

这里借助Array对象的sort方法进行操作，sort方法接受一个function参数，可以在这个function里定义排序时使用的算法逻辑。

array.sort([compareFunction]) 里compareFunction接受两个参数(p1,p2)，sort操作进行时，array对象会每次传两个值进去，进行比较；compareFunciton必须返回一个整数值：当返回值>0时，p1会排在p2后面；返回值<0时，p1会排在p2前面；返回值=0时，不进行操作。

例如：function fnCompare(a,b)
　　　　{
　　　　　　if (a < b)
　　　　　　　　return -1;
　　　　　　if (a > b)
　　　　　　　　return 1;
　　　　　　return 0;
　　　　}
var arr = new Array();
//add some value into arr
arr.sort(fnCompare);

//这里sort的操作结果就是arr里的项按由小到大的升序排序

//如果把fnCompare里改为

//if (a < b)

//　return 1;

//if (a > b)

//　return -1;

//return 0;

//则sort的结果是降序排列

好，下面就是对Select里Option的排序

//因为排序可以按Option的Value排序，也可以按Text排序，这里只演示按Value排序

function sortItem()
{
　　var sel = document.getElementById("selID");
　　var selLength = sel.options.length;
　　var arr = new Array();
　　var arrLength;
　　//将所有Option放入array
　　for(var i=0;i<selLength;i++)
　　{
　　　　arr[i] = sel.options[i];
　　}
　　arrLength = arr.length;
　　arr.sort(fnSortByValue);//排序
　　//先将原先的Option删除
　　while(selLength--)
　　{
　　　　sel.options[selLength] = null;
　　}
　　//将经过排序的Option放回Select中
　　for(i=0;i<arrLength;i++)
　　{
　　　　sel.add(new Option(arr[i].text,arr[i].value));
　　}
}
function fnSortByValue(a,b)
{
　　var aComp = a.value.toString();
　　var bComp = b.value.toString();
　　if (aComp < bComp)
　　　　return -1;
　　if (aComp > bComp)
　　　　return 1;
　　return 0;
}

排序时还可以有更多选项，比如将value值看做Integer或是String进行排序，得到的结果是不一样的。篇幅限制，不在多做介绍。

我将这些所有的操作都写在了一个文件里，运行的效果如图

有兴趣的朋友可以下载来看看，里面还设计div+css排版等。