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 13 Javascript
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
May 11 Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 Javascript
JS获取一个未知DIV高度的方法
Aug 09 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
JavaScript之DOM_动力节点Java学院整理
Jul 03 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
微信小程序实现Swiper轮播图效果
Nov 22 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防注入及开发安全详细解析
2013/08/09 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
Python生成随机密码
2015/03/10 Python
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
Mac安装python3的方法步骤
2019/08/09 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
python实现简单的学生管理系统
2021/02/22 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
英国最大的百货公司:Harrods
2016/08/18 全球购物
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
社会实践心得体会
2014/01/03 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
使用MybatisPlus打印sql语句
2022/04/22 SQL Server