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 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
Node.js实现简单聊天服务器
Jun 20 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
jQuery实现360°全景拖动展示
Mar 18 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
动态更新highcharts数据的实现方法
May 28 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 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
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
PHP 危险函数全解析
2009/09/09 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
Python配置mysql的教程(推荐)
2017/10/13 Python
使用tensorflow实现AlexNet
2017/11/20 Python
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
对Python的多进程锁的使用方法详解
2019/02/18 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
用Python写一个自动木马程序
2019/09/17 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
python实现简单遗传算法
2020/09/18 Python
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
酒店办公室文员岗位职责
2013/12/18 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
工程部部长岗位职责
2015/02/12 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技