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实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
Angular 常用指令实例总结整理
Dec 13 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 Javascript
基于游标的分页接口实现代码示例
Nov 12 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
Vue实现多页签组件
Jan 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
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
代码生成器 document.write()
2007/04/15 Javascript
lib.utf.js
2007/08/21 Javascript
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
js将json格式内容转换成对象的方法
2013/11/01 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
Vue常用的几个指令附完整案例
2018/11/06 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
python实现数据写入excel表格
2018/03/25 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
Python连接Redis的基本配置方法
2018/09/13 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
制药工程专业应届生求职信
2013/09/24 职场文书
师范应届毕业生自荐信
2013/11/18 职场文书
中国梦口号
2014/06/13 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
求职信范文怎么写
2015/03/19 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python