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 ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
js对字符的验证方法汇总
Feb 04 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
jquery设置css样式的多种方法(总结)
Feb 21 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
vue watch关于对象内的属性监听
Apr 22 Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
May 16 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
JS实现星星海特效
Dec 24 Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
PHP批量生成静态HTML的简单原理和方法
2014/04/20 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
javascript闭包的高级使用方法实例
2013/07/04 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
python实现随机漫步算法
2018/08/27 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
PyQt5 多窗口连接实例
2019/06/19 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
Python用户自定义异常的实现
2020/12/25 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
.net面试题
2016/09/17 面试题
线程同步的方法
2016/11/23 面试题
入党自我鉴定
2014/03/25 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
出国留学英文自荐信
2015/03/25 职场文书
单位计划生育责任书
2015/05/09 职场文书
李强为自己工作观后感
2015/06/11 职场文书
红色故事汇观后感
2015/06/18 职场文书