jQuery这个框架方便了我们对于HTML元素的操作,本来以为自己对于Select操作也算是熟悉了,但上午在测试的时候才发现自己了解的还真不多。
看了一下jQuery的一些方法后,理出了一些常用的方法,列在下面:
//获取第一个option的值
$('#test option:first').val();
//最后一个option的值
$('#test option:last').val();
//获取第二个option的值
$('#test option:eq(1)').val();
//获取选中的值
$('#test').val();
$('#test option:selected').val();
//设置值为2的option为选中状态
$('#test').attr('value','2');
//设置第一个option为选中
$('#test option:last').attr('selected','selected');
$("#test").attr('value' , $('#test option:last').val());
$("#test").attr('value' , $('#test option').eq($('#test option').length - 1).val());
//获取select的长度
$('#test option').length;
//添加一个option
$("#test").append("");
$("").appendTo("#test");
//添除选中项
$('#test option:selected').remove();
//指定项选中
$('#test option:first').remove();
//指定值被删除
$('#test option').each(function(){
if( $(this).val() == '5'){
$(this).remove();
}
});
$('#test option[value=5]').remove();
//获取第一个Group的标签
$('#test optgroup:eq(0)').attr('label');
//获取第二group下面第一个option的值
$('#test optgroup:eq(1) :option:eq(0)').val();
获取select中选择的text与value相关的值
获取select选择的Text : var checkText=$("#slc1").find("option:selected").text();
获取select选择的value:var checkValue=$("#slc1").val();
获取select选择的索引值: var checkIndex=$("#slc1 ").get(0).selectedIndex;
获取select最大的索引值: var maxIndex=$("#slc1 option:last").attr("index");
设置select选择的Text和Value
设置select索引值为1的项选中:$("#slc1 ").get(0).selectedIndex=1;
设置select的value值为4的项选中: $("#slc1 ").val(4);
设置select的Text值为JQuery的选中:
$("#slc1 option[text='jQuery']").attr("selected", true);
PS:特别要注意一下第三项的使用哦。看看JQuery的选择器功能是如此地强大呀!
添加删除option项
为select追加一个Option(下拉项)
$("#slc2").append("");
为select插入一个option(第一个位置)
$("#slc2").prepend("");
PS: prepend 这是向所有匹配元素内部的开始处插入内容的最佳方式。
删除select中索引值最大option(最后一个)
$("#slc2 option:last").remove();
删除select中索引值为0的option(第一个)
$("#slc2 option[index='0']").remove();
删除select中value='3'的option
$("#slc2 option[value='3']").remove();
删除select中text='4'的option
$("#slc2 option[text='3']").remove();
一些相关的补充资料:
Jquery操作Select 简单方便 一个js插件搞定
JQuery select标签操作代码段
0
0
相关文章
如何通过鼠标悬停控制浮动层的自动显示与隐藏
如何通过鼠标悬停控制浮层的自动显示与隐藏
如何用 JavaScript 实现鼠标移出时自动收起悬浮层(div)
如何通过鼠标悬停控制浮层(div)的自动展开与收起
解决 HubSpot 表单中 jQuery 克隆后日期选择器失效问题的完整方案
相关标签:
本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门AI工具
相关专题
本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。
1142
2026.02.13
本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。
371
2026.02.13
本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。
245
2026.02.13
本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。
37
2026.02.13
本专题围绕 Redis 在高并发系统中的应用展开,系统讲解主从复制、哨兵机制、Cluster 集群模式及数据分片原理。内容涵盖缓存穿透与雪崩解决方案、分布式锁实现、热点数据优化及持久化策略。通过真实业务场景演示,帮助开发者构建高可用、可扩展的分布式缓存系统。
114
2026.02.13
本专题系统整理雨课堂网页版官方入口及在线登录方式,涵盖账号登录流程、官方直连入口及平台访问方法说明,帮助师生用户快速进入雨课堂在线教学平台,实现便捷、高效的课程学习与教学管理体验。
17
2026.02.12
本专题汇总豆包AI官方网页版入口及在线使用方式,涵盖智能写作工具、图片生成体验入口和官网登录方法,帮助用户快速直达豆包AI平台,高效完成文本创作与AI生图任务,实现便捷智能创作体验。
863
2026.02.12
本专题面向后端开发与数据库工程师,深入讲解 PostgreSQL 查询优化原理与索引机制。内容包括执行计划分析、常见索引类型对比、慢查询优化策略、事务隔离级别以及高并发场景下的性能调优技巧。通过实战案例解析,帮助开发者提升数据库响应速度与系统稳定性。
123
2026.02.12
热门下载
相关下载
精品课程
最新文章

