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 相关文章推荐
实用javaScript技术-屏蔽类
Aug 15 Javascript
treepanel动态加载数据实现代码
Dec 15 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
JS实现的最简Table选项卡效果
Oct 14 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 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调用数据库的存贮过程!
2006/10/09 PHP
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
php date与gmdate的获取日期的区别
2010/02/08 PHP
javascript 尚未实现错误解决办法
2008/11/27 Javascript
ExtJS下grid的一些属性说明
2009/12/13 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
2013/05/15 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
Python Django 命名空间模式的实现
2019/08/09 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
html5图片上传预览示例分享
2014/04/14 HTML / CSS
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
2014年三八妇女节活动方案
2014/02/28 职场文书
欢度春节标语
2014/07/01 职场文书
房屋出租委托书格式
2014/09/23 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
2015年消防工作总结
2015/04/24 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书