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自定义属性(类型/属性值)
May 21 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
js操作数组函数实例小结
Dec 10 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
May 17 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
使用puppeteer爬取网站并抓出404无效链接
Dec 20 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
基于vue手写tree插件的那点事儿
Aug 20 Javascript
express中static中间件的具体使用方法
Oct 17 Javascript
JsonServer安装及启动过程图解
Feb 28 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
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,ajax实现分页
2008/03/27 PHP
php下使用SimpleXML 处理XML 文件
2010/02/27 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
php时间戳转换代码详解
2019/08/04 PHP
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
javascript实现画板功能
2020/04/12 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
python装饰器深入学习
2018/04/06 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
python def 定义函数,调用函数方式
2020/06/02 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
数学系毕业生的自我评价
2014/01/10 职场文书
护士自我评价范文
2014/01/25 职场文书
爱情保证书范文
2014/02/01 职场文书
行政部岗位职责范本
2014/03/13 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
亮剑观后感600字
2015/06/05 职场文书
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL