当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 排序Select中Option项的一个示例

Javascript
Javascript解决常见浏览器兼容问题的12种方法
用AJAX返回HTML片段中的JavaScript脚本
javascript splice数组简单操作
jQuery 数据缓存data(name, value)详解及实现
javascript下动态this与动态绑定实例代码
javascript forEach函数实现代码
javascript bind绑定函数代码
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
jQuery DOM操作小结与实例
Extjs学习笔记之一 初识Extjs之MessageBox
Extjs学习笔记之二 初识Extjs之Form
Extjs学习笔记之三 extjs form更多的表单项
Extjs学习笔记之四 工具栏和菜单
EXT中xtype的含义分析
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
jQuery DOM操作 基于命令改变页面
让多个输入框中的内容同时变化的js代码
判断iframe是否加载完成的完美方法
IE iframe的onload方法分析小结
javascript new一个对象的实质

Javascript 中的 排序Select中Option项的一个示例


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-10   浏览: 245 ::
收藏到网摘: n/a

Form中的Select控件不支持对选择项(Option)的排序,下面我将对Option中value属性值进行排序,并调整每个Option排序后的位置,具体代码如下(这里假设每个Option中的value与其中的text内容相同):

该函数运用了Array(数组)对象的排序(sort)方法,实现了Select排序。

function sortMe(oSel){
var ln = oSel.options.length;
var arr = new Array(); // 这是关键部分

// 将select中的所有option的value值将保存在Array中
for (var i = 0; i < ln; i++)
{

  // 如果需要对option中的文本排序,可以改为arr[i] = oSel.options[i].text;
  arr[i] = oSel.options[i].value;

}

arr.sort(); // 开始排序

// 清空Select中全部Option

while (ln--)
{
  oSel.options[ln] = null;
}

// 将排序后的数组重新添加到Select中

for (i = 0; i < arr.length; i++)
{
  oSel.add (new Option(arr[i], arr[i]));
}
}
</script>

下面的示例演示了一个按升序排序的select