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的public、private和privileged模式
Dec 28 Javascript
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
jquery事件与函数的使用介绍
Sep 29 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
微信小程序 数据绑定详解及实例
Oct 25 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
Js面试算法详解
Apr 08 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
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
php4的彩蛋
2006/10/09 PHP
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
js右键菜单效果代码
2007/07/21 Javascript
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
angular十大常见问题
2017/03/07 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
python实现进程间通信简单实例
2014/07/23 Python
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
Python AES加密实例解析
2018/01/18 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
python利用faker库批量生成测试数据
2020/10/15 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
复核员上岗演讲稿
2014/01/05 职场文书
中班中秋节活动反思
2014/02/18 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
MySQL索引失效场景及解决方案
2022/07/23 MySQL