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的Date方法实现代码(prototype)
Nov 20 Javascript
使用ajax+jqtransform实现动态加载select
Dec 01 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 Javascript
快速解决element的autofocus失效问题
Sep 08 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 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
openPNE常用方法分享
2011/11/29 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
python设置windows桌面壁纸的实现代码
2013/01/28 Python
python调用shell的方法
2013/11/20 Python
pandas.DataFrame选取/排除特定行的方法
2018/07/03 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
python读取xml文件方法解析
2020/08/04 Python
毕业生怎样写好自荐信
2013/11/11 职场文书
优秀经理获奖感言
2014/03/04 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
领导干部对照检查材料
2014/08/24 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
股权转让协议书
2014/12/07 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript