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 相关文章推荐
取键盘键位ASCII码的网页
Jul 30 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
js正则表达式的使用详解
Jul 09 Javascript
javascript中直接写php代码的方法
Jul 31 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
js分页代码分享
Apr 28 Javascript
javascript Deferred和递归次数限制实例
Oct 21 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
js返回顶部实例分享
Dec 21 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 Javascript
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
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 木马攻击防御技巧
2009/06/13 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
php创建图像具体步骤
2017/03/13 PHP
js location.replace与location.reload的区别
2010/09/08 Javascript
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
jquery常用的12个小功能
2016/07/22 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
2017/07/18 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
Python线程指南分享
2019/11/19 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
英国电器零售商:PRC Direct
2018/06/21 全球购物
顺丰快递Java软件工程师面试题
2015/07/31 面试题
档案管理员岗位职责
2013/12/01 职场文书
《胡杨》教学反思
2014/02/16 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
保护环境建议书300字
2014/05/13 职场文书
工程部岗位职责
2015/02/10 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android