当前页面: 开发资料首页 → Javascript 专题 → 排序Select中Option项的一个示例

排序Select中Option项的一个示例

摘要: 排序Select中Option项的一个示例

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

<script> function sortMe(oSel){ var ln = oSel.options.length; var arr = new Array(); for (var i = 0; i < ln; i++) { arr[i] = oSel.options[i].value; } arr.sort(); while (ln--) { oSel.options[ln] = null; } for (i = 0; i < arr.length; i++) { oSel.add (new Option(arr[i], arr[i])); } } </script> <select id=sort_test> <option value=bathroom selected>bathroom</option> <option value=article>article</option> <option value=bath>bath</option> <option value=art>art</option> <option value=CuteHtml>cuteHtml</option> <option value=cute>cute</option></select> <input onclick="sortMe(document.all('sort_test'))" type=button value=sort>

</td> </tr> <tr> <td vAlign=top align=left height="100%">
↑返回目录
前一篇: 类似ListView ，htc组件
后一篇: 在网页中控制wmplayer播放器