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 相关文章推荐
多浏览器兼容的获取元素和鼠标的位置的js代码
Dec 15 Javascript
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 Javascript
js Dialog 去掉右上角的X关闭功能
Apr 23 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
Dec 20 Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 Javascript
基于postman获取动态数据过程详解
Sep 08 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和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
PHP iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
php获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
js Html结构转字符串形式显示代码
2011/11/15 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
Python heapq使用详解及实例代码
2017/01/25 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
创建省级文明单位实施方案
2014/02/27 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
学者《孟子》名人名言
2019/08/09 职场文书
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫
Windows server 2012搭建FTP服务器
2022/04/29 Servers