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 相关文章推荐
热点新闻滚动特效的js代码
Aug 17 Javascript
javascript中数组的sort()方法的使用介绍
Dec 18 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
详解JavaScript中的属性和特性
Dec 08 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
Jun 04 Javascript
微信小程序中页面FOR循环和嵌套循环
Jun 21 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
Oct 28 Javascript
node koa2 ssr项目搭建的方法步骤
Dec 11 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连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
React学习笔记之条件渲染(一)
2017/07/02 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
python 中的列表解析和生成表达式
2011/03/10 Python
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
Python分类测试代码实例汇总
2020/07/23 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
MySQL面试题目集锦
2016/04/14 面试题
大三学生入党思想汇报
2014/01/02 职场文书
cf收人广告词大全
2014/03/14 职场文书
读书月活动方案
2014/05/22 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL