JQuery select控件的相关操作实现代码


Posted in Javascript onSeptember 14, 2012

获取select
先看看下面代码:

$("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 
var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 
var checkValue=$("#select_id").val(); //获取Select选择的Value 
var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值 
var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值 
$("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中 
$("#select_id ").val(4); //设置Select的Value值为4的项选中 
$("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中

获取select 选中的 text :
$("#ddlRegType").find("option:selected").text();

获取select选中的 value:
$("#nowamagic").val();

获取select选中的索引:
$("#nowamagic").get(0).selectedIndex;

设置select
jQuery添加/删除Select的Option项:
$("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项) 
$("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置) 
$("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个) 
$("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个) 
$("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option 
$("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option

设置select 选中的索引:
//index为索引值 
$("#nowamagic").get(0).selectedIndex=index;

设置select 选中的value:
$("#nowamagic").attr("value","Normal"); 
$("#nowamagic").val("Normal"); 
$("#nowamagic").get(0).value = value;

设置select 选中的text:
var count=$("#nowamagicoption").length; 
for(var i=0;i<count;i++) 
{ if($("#nowamagic").get(0).options[i].text == text) 
{ 
$("#nowamagic").get(0).options[i].selected = true; break; 
} 
}

清空 select:
$("#nowamagic").empty();
Javascript 相关文章推荐
jQuery 工具函数学习资料
Apr 29 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
$.each与$().each的区别示例介绍
Mar 20 Javascript
什么是Node.js?Node.js详细介绍
Jun 01 Javascript
jquery datatable后台封装数据示例代码
Aug 07 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
js实现图片放大展示效果
Aug 30 Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 Javascript
jQuery实现日历效果
Sep 11 jQuery
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 #Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 #Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 #Javascript
Java 正则表达式学习总结和一些小例子
Sep 13 #Javascript
获取客户端电脑日期时间js代码(jquery)
Sep 12 #Javascript
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 #Javascript
jquery ajax例子返回值详解
Sep 11 #Javascript
You might like
php检查是否是ajax请求的方法
2015/04/16 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
js 利用className得到对象的实现代码
2011/11/15 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
JS面向对象编程详解
2016/03/06 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
Django查询数据库的性能优化示例代码
2017/09/24 Python
python中返回矩阵的行列方法
2018/04/04 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
Django框架视图介绍与使用详解
2019/07/18 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
英国网上电器商店:Electricshop
2020/03/15 全球购物
安全员岗位职责
2013/11/11 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android