前端---jq(jQuery)--select选择器

最新推荐文章于 2024-05-03 13:26:42 发布

系子818

最新推荐文章于 2024-05-03 13:26:42 发布

阅读量466

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_57085190/article/details/127922938

版权

前端---js--select选择器的option排序

//按option中的值排序
            $('#select>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('#select');
            $('#select>option').eq(0).attr("selected","selected");


//按option中的值排序
            $('#select>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('#select');
            $(#select>option').eq(0).attr("selected","selected");

或者：

//按option中的值排序
            var select_option = $('#select>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;
            })

            select_option.appendTo('#select');
            $('#select>option').eq(0).attr("selected","selected");


//按option中的值排序
            var select_option = $('#select>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;
            })

            select_option.appendTo('#select');
            $(#select>option').eq(0).attr("selected","selected");

PS:

1：$('#select_park>option') 的 ‘select_park’ 是<select>标签的id，

option的删除

推荐使用value来删除：$("#select option[value='']").remove(); //删除Select中value=''(空)的Option

$("#select_park option[value='']").remove(); //删除Select中value=''(空)的Option

$("#select_id option:last").remove();//删除Select中索引值最大Option(最后一个)

$("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)

$("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option

$("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option

我写的：

$("#select option[value='']").remove(); //删除Select中value=''的Option

//排序
    var select_option = $('#select>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;
    })
    $("#select").append('<option value="">请选择园区</option>');

    //排序后添加到select
    select_option.appendTo('#select');
    $('#select>option').eq(0).attr("selected","selected");