当前位置:asp编程网>技术教程>Javascript教程>  正文

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

2017-12-07 13:33:40   来源:www.aspbc.com   作者:wangsdong   浏览量:1418   收藏

功能: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排序">

点击上面两个按纽,查看不同的排序方式。


关于我们-广告合作-联系我们-积分规则-网站地图

Copyright(C)2013-2017版权所属asp编程网