jquery下拉select控件操作方法分享(jquery操作select)


Posted in Javascript onMarch 25, 2014

JQuery获取和设置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 相关文章推荐
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
JQuery中Bind()事件用法分析
May 05 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
JavaScript之cookie技术详解
Nov 18 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
详谈innerHTML innerText的使用和区别
Aug 18 Javascript
JavaScript继承与多继承实例分析
May 26 Javascript
详解express + mock让前后台并行开发
Jun 06 Javascript
vue学习之Vue-Router用法实例分析
Jan 06 Javascript
jquery的each方法使用示例分享
Mar 25 #Javascript
提取jquery的ready()方法单独使用示例
Mar 25 #Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 #Javascript
jquery解析xml字符串示例分享
Mar 25 #Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 #Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 #Javascript
Jquery插件编写简明教程
Mar 25 #Javascript
You might like
PHP中cookies使用指南
2007/03/16 PHP
PHP 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
FireFox下XML对象转化成字符串的解决方法
2011/12/09 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
详解python时间模块中的datetime模块
2016/01/13 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
windows下python和pip安装教程
2018/05/25 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
django如何实现视图重定向
2019/07/24 Python
python如何实现复制目录到指定目录
2020/02/13 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
Numpy 多维数据数组的实现
2020/06/18 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
美国室内盆栽植物购买网站:Plants.com
2020/04/24 全球购物
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
什么是跨站脚本攻击
2014/12/11 面试题
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
《月光启蒙》教学反思
2014/03/01 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
学校教学管理制度
2015/08/06 职场文书
vue使用echarts实现折线图
2022/03/21 Vue.js