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 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
Apr 13 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
jQuery监控文本框事件并作相应处理的方法
Apr 16 Javascript
初步认识JavaScript函数库jQuery
Jun 18 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 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 gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
php数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
让焦点自动跳转
2006/07/01 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
Python基于回溯法解决01背包问题实例
2017/12/06 Python
python 剪切移动文件的实现代码
2018/08/02 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
python中的print()输出
2019/04/12 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
房产委托公证书样本
2014/04/04 职场文书
献爱心倡议书
2014/04/14 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技