首页 前端知识 jQuery操作select

jQuery操作select

2024-05-23 20:05:31 前端知识 前端哥 143 685 我要收藏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script>
    
    $(function(){
        //获取第一个option的值
        var firstval=$('#selectID option:first').val();
        alert(firstval);
        
        //获取最后一个option的值
        var lastval =$('#selectID option:last').val();
        alert(lastval);
        
        //获取第二个option的值
        var secondval =$('#selectID option:eq(1)').val();
        alert (secondval);
        
        //获取选中项的值
        var selectedval =$('#selectID option:selected').val();
        alert(selectedval);
        
        //设置值为3的option为选中状态
        $('#selectID').attr('value','3');
        
        //设置最后一个option为选中状态
        $('#selectID option:last').attr('selected','selected');
        $('#selectID').attr('value',$('#selectID option:last').val());
        $('#selectID').attr('value',$('#selectID option').eq($('#selectID option').length-1).val());
        
        //获取select的长度
        var selectlength =$('#selectID option').length;
        alert(selectlength);
        
        //加入一个option
        $('#selectID').append("<option value='n+1'>第n+1项</option>");
        $("<option value='n+1'>第n+1项</option>>").appendTo('#selectID');
        
        //删除选中项
        $('#selectID option:selected').remove();
        
        //删除第一项
        $('#selectedID option:first').remove();
        
        //指定值被删除
        $('#selectedID option').each(function(){
            if($(this).val()=='3'){
                $(this).remove();    
            }
        });
        
        
    })
</script>
</head>

<body>
<select id ="selectID">
    <option value="1">选项一</option>
    <option value="2">选项二</option>
    <option value="3">选项三</option>
    <option value="n">选项n</option>
</select>
</body>
</html>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9163.html
标签
经验分享
评论
发布的文章

jQuery初学

2024-05-29 10:05:14

Jquery中$,web开发语言

2024-05-29 10:05:25

jQuery 实现小球撞击动画

2024-05-29 10:05:04

echarts 横向柱状图

2024-05-29 10:05:01

Echarts:读取动态数据

2024-05-29 10:05:53

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!