Jquery操作下拉框(DropDownList)实现取值赋值


Posted in Javascript onAugust 13, 2013

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("f");

15. 在select前面添加一个option:
$("select#sel").prepend("0");

16. 遍历option:
$(' select#sel option ').each(function (index, domEle) { 
//写入代码 
});
Javascript 相关文章推荐
utf8的编码算法 转载
Dec 27 Javascript
jQuery 动画弹出窗体支持多种展现方式
Apr 29 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
Vue.js的动态组件模板的实现
Nov 26 Javascript
React 组件渲染和更新的实现代码示例
Feb 21 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 #Javascript
鼠标经过显示二级菜单js特效
Aug 13 #Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 #Javascript
jquery固定底网站底部菜单效果
Aug 13 #Javascript
js 三级关联菜单效果实例
Aug 13 #Javascript
js 单击式的下拉菜单效果实例
Aug 13 #Javascript
让元素在网页中可拖动示例代码
Aug 13 #Javascript
You might like
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
php类的定义与继承用法实例
2015/07/07 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
解释&&和||在javascript中的另类用法
2014/07/28 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
python语言元素知识点详解
2019/05/15 Python
Python银行系统实战源码
2019/10/25 Python
Python图片的横坐标汉字实例
2019/12/04 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
String和StringBuffer的区别
2015/08/13 面试题
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
教育科学研究生自荐信
2013/10/09 职场文书
打架检讨书100字
2014/01/08 职场文书
《理想》教学反思
2014/02/17 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
环境保护建议书
2014/08/26 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书