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 ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
js模块加载方式浅析
Aug 12 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
Vue formData实现图片上传
Aug 20 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 Javascript
javascript全局自定义鼠标右键菜单
Dec 08 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 文件上传全攻略
2010/04/28 PHP
PHP Directory 函数的详解
2013/03/07 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
php时间戳转换的示例
2014/03/31 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
js以对象为索引的关联数组
2010/07/04 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
Python获取远程文件大小的函数代码分享
2014/05/13 Python
独特的python循环语句
2016/11/20 Python
scrapy爬虫完整实例
2018/01/25 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
基于python实现从尾到头打印链表
2019/11/02 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
电子商务专业学生职业生涯规划
2014/03/07 职场文书
英语系本科生求职信
2014/07/15 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
学校证明范文
2015/06/24 职场文书
会议室使用管理制度
2015/08/06 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
完美解决golang go get私有仓库的问题
2021/05/05 Golang
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android
JavaScript中10个Reduce常用场景技巧
2022/06/21 Javascript