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面向对象程序设计三 原型模式(上)
Dec 21 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 Javascript
JavaScript之cookie技术详解
Nov 18 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
js制作简单的音乐播放器的示例代码
Aug 28 Javascript
js中的 || 与 && 运算符详解
May 24 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
Sep 18 Javascript
JS实现简易留言板增删功能
Feb 08 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
jquery实现拖拽小方块效果
Dec 10 jQuery
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
PHP4和PHP5共存于一系统
2006/11/17 PHP
PHP类的使用 实例代码讲解
2009/12/28 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
使用angular写一个hello world
2015/01/23 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
python中enumerate函数用法实例分析
2015/05/20 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
python创建学生管理系统
2019/11/22 Python
高考考python编程是真的吗
2020/07/20 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
大学生军训感想
2014/02/16 职场文书
元宵晚会主持词
2014/03/25 职场文书
企业安全生产标语
2014/06/06 职场文书
领导参观欢迎词
2015/01/26 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫