jQuery解決select下拉框中option的排序方法

開發(fā)技術(shù) 2016/12/15

功能：jQuery解決select下拉框中option的排序方法

代碼如下：

<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script>
    $(function(){
        $("#a1").click(function(){
            $('#varlist>option').sort(function(a,b){
                //按option中的值排序
                var aText = $(a).text().toUpperCase();
                var bText = $(b).text().toUpperCase();
                if(aText > bText) return -1;
                if(aText < bText) return 1;
                return 0;
            }).appendTo('#varlist');
            $('#varlist>option').eq(0).attr("selected","selected");
        });
        $("#a2").click(function(){
            $('#varlist>option').sort(function(a,b){
                //按option中的值排序
                var aText = $(a).val()*1;
                var bText = $(b).val()*1;
                if(aText > bText) return -1;
                if(aText < bText) return 1;
                return 0;
            }).appendTo('#varlist');
            $('#varlist>option').eq(0).attr("selected","selected");
        })

    })
</script>
<select name="varlist" id="varlist" multiple="multiple" style="height: 105px; width: 150px;">
    <option value="1">aspbc.com</option>
    <option value="2">百度</option>
    <option value="3">chinaz</option>
    <option value="4">新浪</option>
    <option value="5">163</option>
    <option value="6">google</option>
    <option value="7">csdn</option>
    <option value="8">php</option>
    <option value="9">asp</option>
    <option value="10">C#</option>
</select>
<input type="button" id="a1" value="按文本排序">
<input type="button" id="a2" value="按value排序">

點擊上面兩個按紐，查看不同的排序方式。