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 相关文章推荐
js下用gb2312编码解码实现方法
Dec 31 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 Javascript
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
vue插件实现v-model功能
Sep 10 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 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仿ZOL分页类代码
2008/10/02 PHP
PHP多进程编程实例
2014/10/15 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
JavaScript 空位补零实现代码
2010/02/26 Javascript
JavaScript 比较时间大小的代码
2010/04/24 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
Python中new方法的详解
2019/01/15 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
一组SQL面试题
2016/02/15 面试题
校园自助餐厅的创业计划书
2013/12/26 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
房贷收入证明范本
2015/06/12 职场文书
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python