JQuery select(下拉框)操作方法汇总


Posted in Javascript onApril 15, 2015

JQuery select(下拉框)操作方法汇总

1. 获取选中项:
获取选中项的Value值:

$('select#sel option:selected').val();

或者
$('select#sel').find('option:selected').val();

获取选中项的Text值:
$('select#seloption:selected').text();

或者
$('select#sel').find('option:selected').text();

2.   获取当前选中项的索引值:
$('select#sel').get(0).selectedIndex;

3.   获取当前option的最大索引值:
$('select#sel option:last').attr("index")

4.   获取DropdownList的长度:
$('select#sel')[0].options.length;

或者
$('select#sel').get(0).options.length;

5.  设置第一个option为选中值:
$('select#sel option:first').attr('selected','true')

或者
$('select#sel')[0].selectedIndex = 0;

6.   设置最后一个option为选中值:
$('select#sel option:last).attr('selected','true')

7.   根据索引值设置任意一个option为选中值:
$('select#sel')[0].selectedIndex =索引值;索引值=0,1,2....

8.   设置Value=4 的option为选中值:
$('select#sel').attr('value','4');

或者
$("select#sel option[value='4']").attr('selected', 'true');

9.   删除Value=3的option:
$("select#sel option[value='3']").remove();

10.删除第几个option:
$(" select#sel option ").eq(索引值).remove();索引值=0,1,2....

如删除第3个Radio:
$(" select#sel option ").eq(2).remove();

11.删除第一个option:
$(" select#sel option ").eq(0).remove();

或者
$("select#sel option:first").remove();

12. 删除最后一个option:
$("select#sel option:last").remove();

13. 删除dropdownlist:
$("select#sel").remove();

14.在select后面添加一个option:
$("select#sel").append("<option value='6'>f</option>");

15. 在select前面添加一个option:
$("select#sel").prepend("<option value='0'>0</option>");

16. 遍历option:
$(' select#sel option ').each(function (index, domEle) {

//写入代码

});
Javascript 相关文章推荐
通过jquery 获取URL参数并进行转码
Aug 18 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
js实现表单检测及表单提示的方法
Aug 14 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 Javascript
JS变量提升及函数提升实例解析
Sep 03 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
Oct 28 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 #Javascript
JS扩展方法实例分析
Apr 15 #Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 #Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 #Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 #Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 #Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 #Javascript
You might like
如何使用PHP计算上一个月的今天
2013/05/23 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
学习jquery之一
2007/04/27 Javascript
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
基于jquery的Repeater实现代码
2010/07/17 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
JS前端笔试题分析
2016/12/19 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[41:05]Serenity vs Pain 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python实现简单tftp(基于udp协议)
2018/07/30 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
岗位职责风险防控
2014/02/18 职场文书
大学军训感言800字
2014/02/27 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
质量月活动总结
2014/08/26 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis