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 相关文章推荐
java、javascript实现附件下载示例
Aug 14 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
js轮盘抽奖实例分析
Apr 17 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
May 21 Javascript
vue created钩子函数与mounted钩子函数的用法区别
Nov 05 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读取大文件示例分享(文件操作类)
2014/04/13 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
循环 vs 递归浅谈
2013/02/28 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
Python正规则表达式学习指南
2016/08/02 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
深入理解Python 多线程
2020/06/16 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
最新英语专业学生求职信范文
2013/09/21 职场文书
技术总监的工作职责
2013/11/13 职场文书
电信专业毕业生推荐信
2013/11/18 职场文书
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
基层党员公开承诺书
2014/05/29 职场文书
小学生环保标语
2014/06/13 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
纪念一二九运动演讲稿
2014/09/16 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS