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 相关文章推荐
深入理解javascript原型链和继承
Sep 23 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
Easyui使用Dialog行内按钮布局的实例
Jul 27 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 Javascript
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
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
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
提升PHP执行速度全攻略(下)
2006/10/09 PHP
PHP+DBM的同学录程序(5)
2006/10/09 PHP
php &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
javascript实现的左右无缝滚动效果
2016/09/19 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
python 串行执行和并行执行实例
2020/04/30 Python
使用CSS3在触屏上为按钮实现激活效果
2013/09/27 HTML / CSS
英国二手物品交易网站:Preloved
2017/10/06 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
12.4法制宣传日活动总结
2014/08/26 职场文书
教师研修随笔感言
2015/11/18 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python