欢迎光临
我们一直在努力

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

建站超值云服务器,限时71元/月

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

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

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » jQuery解决select下拉框中option的排序方法
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址