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 相关文章推荐
Javascript 日期对象Date扩展方法
May 30 Javascript
关于jquery性能最佳实践的讨论,与求教
Mar 30 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
Node.js的包详细介绍
Jan 14 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 Javascript
JavaScript严格模式下关于this的几种指向详解
Jul 12 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
JavaScript中CreateTextFile函数
Aug 30 Javascript
Vue3.0 手写放大镜效果
Jul 25 Vue.js
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
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
关于JavaScript中的关联数组分析
2013/04/09 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
window.onload追加函数使用示例
2014/03/03 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
使用原生js+canvas实现模拟心电图的实例
2017/09/20 Javascript
vue模块拖拽实现示例代码
2019/03/09 Javascript
小程序云开发如何实现图片上传及发表文字
2019/05/17 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
使用Python下载Bing图片(代码)
2013/11/07 Python
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
波兰补充商店:Muscle Power
2018/10/29 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
厨房工作人员岗位职责
2013/11/15 职场文书
个人优缺点自我评价
2014/01/27 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
督导岗位职责
2015/02/04 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server