Jquery Select操作方法集合脚本之家特别版


Posted in Javascript onMay 17, 2010

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("<option value='9'>ff</option>");
$("<option value='9'>ff</option>").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("<option value='"+i+"'>"+i+"</option>");
为select插入一个option(第一个位置)
$("#slc2").prepend("<option value='0'>请选择</option>");
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标签操作代码段

Javascript 相关文章推荐
二级域名转向类
Nov 09 Javascript
JS链式调用的实现方法
Mar 07 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
React组件内事件传参实现tab切换的示例代码
Jul 04 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
ES6 fetch函数与后台交互实现
Nov 14 Javascript
vue实现的组件兄弟间通信功能示例
Dec 04 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 Javascript
微信小程序(订阅消息)功能
Oct 25 Javascript
JQuery select标签操作代码段
May 16 #Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 #Javascript
Jquery 最近浏览过的商品的功能实现代码
May 14 #Javascript
WEB 浏览器兼容 推荐收藏
May 14 #Javascript
js 数值项目的格式化函数代码
May 14 #Javascript
IE8 中使用加速器(Activities)
May 14 #Javascript
jquery 日期分离成年月日的代码
May 14 #Javascript
You might like
星际争霸 Starcraft 秘技补丁
2020/03/14 星际争霸
十天学会php之第一天
2006/10/09 PHP
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
python执行等待程序直到第二天零点的方法
2015/04/23 Python
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
python用requests实现http请求代码实例
2019/10/31 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
python怎么判断模块安装完成
2020/06/19 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
一些Unix笔试题和面试题
2013/01/22 面试题
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
医院工作检讨书范文
2014/02/10 职场文书
银行求职信范文
2014/05/26 职场文书
倡议书的格式写法
2015/04/28 职场文书