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 相关文章推荐
JavaScript DOM进阶方法
Apr 13 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
js 作用域和变量详解
Feb 16 Javascript
ionic环境配置及问题详解
Jun 27 Javascript
微信小程序自定义组件之可清除的input组件
Jul 17 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 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-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
javascript Array.remove() 数组删除
2009/08/06 Javascript
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
python处理图片之PIL模块简单使用方法
2015/05/11 Python
浅谈python中set使用
2016/06/30 Python
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
wxPython实现带颜色的进度条
2019/11/19 Python
简单介绍django提供的加密算法
2019/12/18 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
Html5之title吸顶功能
2018/06/04 HTML / CSS
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
面向对象编程的优势是什么
2015/12/17 面试题
经典c++面试题四
2015/05/14 面试题
Linux机考试题
2015/10/16 面试题
项目副经理岗位职责
2013/12/30 职场文书
大型活动策划方案
2014/01/12 职场文书
税务会计岗位职责
2014/02/18 职场文书
岗位说明书怎么写
2014/07/30 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
大学生就业意向书
2015/05/11 职场文书
初中同学会致辞
2015/08/01 职场文书
PHP中多字节字符串操作实例详解
2021/08/23 PHP
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技