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停止输出代码
Jul 20 Javascript
IE php关于强制下载文件的代码
Aug 23 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
理解javascript闭包
Dec 15 Javascript
浅谈Sticky组件的改进实现
Mar 22 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
javascript中数组的常用算法深入分析
Mar 12 Javascript
vue自定义指令和动态路由实现权限控制
Aug 28 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基础知识:控制结构
2006/12/13 PHP
PHP常用编译参数中文说明
2014/09/27 PHP
php循环table实现一行两列显示的方法
2015/06/04 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
限制文本字节数js代码
2007/03/06 Javascript
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
Python中的作用域规则详解
2015/01/30 Python
使用Python的判断语句模拟三目运算
2015/04/24 Python
python实现自动重启本程序的方法
2015/07/09 Python
python决策树之C4.5算法详解
2017/12/20 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
python集合删除多种方法详解
2020/02/10 Python
英文版区域经理求职信
2013/10/23 职场文书
化工专业大学生职业生涯规划书
2014/01/14 职场文书
网络程序员自荐信
2014/01/25 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
小学生差生评语
2014/12/29 职场文书
财产保全担保书
2015/01/20 职场文书
上诉答辩状范文
2015/05/22 职场文书
培训讲师开场白
2015/06/01 职场文书
入队仪式主持词
2015/07/04 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python
python 离散点图画法的实现
2022/04/01 Python