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 相关文章推荐
用YUI做了个标签浏览效果
Feb 20 Javascript
基于jQuery的图片大小自动适应实现代码
Nov 17 Javascript
实现变速回到顶部的JavaScript代码
May 09 Javascript
jQuery 插件开发指南
Nov 14 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
Javascript实现的StopWatch功能示例
Jun 13 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 Javascript
AngularJS 应用模块化的使用
Apr 04 Javascript
JavaScript实现图片放大镜效果
Jun 27 Javascript
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通过function_exists检测函数是否存在的方法
2015/03/18 PHP
[原创]php逐行读取txt文件写入数组的方法
2015/07/02 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
javascript string字符串优化问题
2011/07/31 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
深入解析Python中函数的参数与作用域
2016/03/20 Python
python 字典(dict)按键和值排序
2016/06/28 Python
Python命令启动Web服务器实例详解
2017/02/23 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
Python操作json的方法实例分析
2018/12/06 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
Python OpenCV实现视频分帧
2019/06/01 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
如何用python处理excel表格
2020/06/09 Python
高级技校毕业生自荐信
2013/11/18 职场文书
大学校园生活自我鉴定
2014/01/13 职场文书
大学生的自我鉴定范文
2014/01/21 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
八年级物理教学反思
2016/02/19 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
导游词之青岛太清宫
2019/12/13 职场文书
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技