对select上拉列表的列表项option进行排序

对select下拉列表的列表项option进行排序
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>js select's option排序</title>
        <script type="text/javascript" src="jquery-1.2.6.min.js">
        </script>

        <script type="text/javascript">
        //排序算法
function sortOPtions(oSel){
var ln = oSel.options.length;
var arr = []; //关键就是定义的这个数组
//将select中的所有option的text值将保存在数组arr中
for (var i = 0; i < ln; i++)
{
//如果需要对option中的value排序，可以改为arr[i] = oSel.options[i].text;
arr[i] = oSel.options[i].text;
}
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]));
}
}

//触发下拉框的onchange事件
function alertValue (sele){
window.alert(sele.value);
}

            $(document).ready(function(){
            //给按钮绑定事件
                $("#btn").click(function(){
                sortOPtions(document.getElementById("sel"));
                });
            });
        </script>
    </head>
    <body>
        <select id="sel" onchange="alertValue(this);">
        <option value="BMSCC_01">BMSCC_01</option>
        <option value="BMSCC_02">BMSCC_02</option>
        <option value=""></option>
        <option value="BMSCC_03">BMSCC_03</option>
        <option value="BMSCC_04">BMSCC_04</option>
        </select>
        <hr>
        <input type="button" value="排序" id="btn" />
    </body>
</html>

对select上拉列表的列表项option进行排序

相关推荐