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 相关文章推荐
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
jQuery()方法的第二个参数详解
Apr 29 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
基于jQuery实现定位导航位置效果
Nov 15 jQuery
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 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实现登陆验证码(类似条行码状)
2006/10/09 PHP
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
浅谈php和.net的区别
2014/09/28 PHP
PHP时间和日期函数详解
2015/05/08 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
Python下载懒人图库JavaScript特效
2015/05/28 Python
利用python画出折线图
2018/07/26 Python
pycharm创建一个python包方法图解
2019/04/10 Python
python绘制雪景图
2019/12/16 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
python redis存入字典序列化存储教程
2020/07/16 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
使用html5制作loading图的示例
2014/04/14 HTML / CSS
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
网络安全方面的面试题
2015/11/04 面试题
运动会广播稿300字
2014/01/10 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
公司节能减排倡议书
2014/05/14 职场文书
2014年转正工作总结
2014/11/08 职场文书
工作岗位职责范本
2015/02/15 职场文书
工作时间调整通知
2015/04/24 职场文书
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏
Python中的 No Module named ***问题及解决
2022/07/23 Python