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 相关文章推荐
js 浮动层菜单收藏
Jan 16 Javascript
JS中==与===操作符的比较
Mar 21 Javascript
JavaScript的eval JSON object问题
Nov 15 Javascript
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
面向对象的Javascript之一(初识Javascript)
Jan 20 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
javascript如何创建对象
Aug 29 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
JS实现鼠标按下拖拽效果
Jul 23 Javascript
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
ip签名探针
2006/10/09 PHP
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
$()JS小技巧
2007/07/21 Javascript
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
Js sort排序使用方法
2011/10/17 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
js style动态设置table高度
2014/10/21 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
ant design实现圈选功能
2019/12/17 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
python中去空格函数的用法
2014/08/21 Python
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
Python对象转换为json的方法步骤
2019/04/25 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
Python如何重新加载模块
2020/07/29 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
实用求职信范文分享
2013/12/25 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
干部考察材料范文
2014/12/24 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
单位病假条范文
2015/08/17 职场文书
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js