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的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
Feb 04 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
AngularJS指令与指令之间的交互功能示例
Dec 14 Javascript
简单的Vue SSR的示例代码
Jan 12 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 Javascript
微信小程序云开发 搭建一个管理小程序
May 17 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
推荐几个不错的console调试技巧实现
Dec 20 Javascript
基于JavaScript实现随机点名器
Feb 25 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中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
php实现指定字符串中查找子字符串的方法
2015/03/17 PHP
php基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
PHP实现的XML操作类【XML Library】
2016/12/29 PHP
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
自己编写的类似JS的trim方法
2013/10/09 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
python网络编程学习笔记(一)
2014/06/09 Python
Python 中 Meta Classes详解
2016/02/13 Python
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
Python之list对应元素求和的方法
2018/06/28 Python
django项目搭建与Session使用详解
2018/10/10 Python
python版大富翁源代码分享
2018/11/19 Python
python reverse反转部分数组的实例
2018/12/13 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
canvas实现手机的手势解锁的步骤详细
2020/03/16 HTML / CSS
大学生职业规划论文
2014/01/11 职场文书
高中生家长会演讲稿
2014/01/14 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
工作检讨书范文
2015/01/23 职场文书
导游词之桂林
2019/08/20 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS