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 相关文章推荐
Jquery 动态添加按钮实现代码
May 06 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
Aug 30 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
vue中如何实现pdf文件预览的方法
Jul 12 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
移动端手指操控左右滑动的菜单
Sep 08 Javascript
Vue中this.$nextTick的作用及用法
Feb 04 Javascript
JavaScript实现音乐播放器
Aug 14 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
通过html表格发电子邮件
2006/10/09 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
JS实现self的resend
2010/07/22 Javascript
JS DOM 操作实现代码
2010/08/01 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
TensorFlow变量管理详解
2018/03/10 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
10张动图学会python循环与递归问题
2021/02/06 Python
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
中学教师培训制度
2014/01/31 职场文书
连带责任保证书
2014/04/29 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python