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 13 Javascript
namespace.js Javascript的命名空间库
Oct 11 Javascript
减少访问DOM的次数提升javascript性能
Feb 24 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 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
第十节--抽象方法和抽象类
2006/11/16 PHP
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
解析php类的注册与自动加载
2013/07/05 PHP
php对数组排序的简单实例
2013/12/25 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
PHP连接access数据库
2015/03/27 PHP
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
vue--点击当前增加class,其他删除class的方法
2018/09/15 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
python 远程统计文件代码分享
2015/05/14 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
会计助理的岗位职责
2013/11/29 职场文书
自行车广告词大全
2014/03/21 职场文书
2014年创先争优活动总结
2014/05/04 职场文书
优秀毕业生自荐信
2014/06/10 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫