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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
Oct 11 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
详解组件库的webpack构建速度优化
Jun 18 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
前端js中的事件循环eventloop机制详解
May 15 Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 Javascript
JS sort排序详细使用方法示例解析
Sep 27 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 18 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通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
jquery之Document元素选择器篇
2008/08/14 Javascript
海量经典的jQuery插件集合
2010/01/12 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
Python深入学习之特殊方法与多范式
2014/08/31 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
Python中bisect的用法及示例详解
2020/07/20 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
欧铁通票官方在线销售网站:Eurail.com
2017/10/14 全球购物
车祸赔偿收入证明
2014/01/09 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
材料采购员岗位职责
2015/04/03 职场文书
行政上诉状范文
2015/05/23 职场文书
java设计模式--建造者模式详解
2021/07/21 Java/Android
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers