select 的操作 jQuery / JavaScript / CSS

1 jQuery 操作 select

1.1 获取值得操作

    var checkText=$("#select_id").find("option:selected").text();   //获取Select选择的Text
    var checkValue=$("#select_id").val();   //获取Select选择的Value
    var checkIndex=$("#select_id ").get(0).selectedIndex;   //获取Select选择的索引值
    var maxIndex=$("#select_id option:last").attr("index");   //获取Select最大的索引值
    var first_value = $('#select_id option:first').val(); // 获取第一个option的值     
    var last_value =  $('#select_id option:last').val(); //最后一个option的值   
    var second = $('#select_id option:eq(1)').val();//获取第二个option的值 
     var second = $('#select_id ').attr('value','2'); // 设置值为 option 为选中的状态
    // 设置最后一个option为选中
    $('#select_id option:last').attr('selected','selected');
    $("#select_id ").attr('value' , $('#test option:last').val());
    $("#select_id ").attr('value' , $('#test option').eq($('#test option').length - 1).val());
    var length = $('#select_id option').length;

1.2 监听

$("#select_id").change(function(){//code...});  

1.3 添加 select / 删除 option 项

$("#select_id").html("<option value='Value'>Text</option>");   //为Select设置Option(下拉项)
$("#select_id").append("<option value='Value'>Text</option>");   //为Select追加一个Option(下拉项)
$("#select_id").prepend("<option value='0'>请选择</option>");   //为Select插入一个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<strong>

1.4 清空 select

$("#select_id").empty();
// 删除指定项
$('#select_id option').each(function(){
   if( $(this).val() == '5'){
        $(this).remove();
    }
});
$('#select_id option[value=5]').remove();

JavaScript 操作 select

待更新....

CSS 常用的 select 的样式

待更新...

推荐阅读:

• https://www.cnblogs.com/eager/p/7133270.html
• https://www.jianshu.com/p/962e6157c410