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 相关文章推荐
JavaScript 代码压缩工具小结
Feb 27 Javascript
div模拟滚动条效果示例代码
Oct 16 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
node.js通过axios实现网络请求的方法
Mar 05 Javascript
vue axios post发送复杂对象问题
Jun 04 Javascript
微信小程序实现原生步骤条
Jul 25 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
JS代码编译器Monaco使用方法
Jun 11 Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
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
Terran剧情介绍
2020/03/14 星际争霸
PHP+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
javascript显示选择目录对话框的代码
2008/11/10 Javascript
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
2016/01/04 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
python正则表达式re模块详解
2014/06/25 Python
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
python实现挑选出来100以内的质数
2015/03/24 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法
2018/05/04 Python
python自动化发送邮件实例讲解
2021/01/04 Python
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
行政专员岗位职责
2014/01/02 职场文书
职工运动会感言
2014/02/07 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书
银行授权委托书样本
2014/10/13 职场文书
教师节感谢信
2015/01/22 职场文书
2015年酒店工作总结
2015/04/28 职场文书