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 相关文章推荐
你需要知道的JavsScript可以做什么?
Jun 29 Javascript
SWFObject Flash js调用类
Jul 08 Javascript
JavaScript 比较时间大小的代码
Apr 24 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
Javascript中使用parseInt函数需要注意的问题
Apr 02 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 Javascript
深入理解js中的加载事件
Feb 08 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 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 设计模式之观察者模式介绍
2012/02/22 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
PHP获取MAC地址的具体实例
2013/12/13 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
Bootstrap Table从零开始
2017/06/30 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
基于vue.js的分页插件详解
2017/11/27 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
Python实现合并字典的方法
2015/07/07 Python
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
python opencv实现图像边缘检测
2019/04/29 Python
python SVM 线性分类模型的实现
2019/07/19 Python
linux系统都有哪些运行级别
2016/03/26 面试题
美德好少年事迹材料
2014/01/19 职场文书
《记金华的双龙洞》教学反思
2014/04/19 职场文书
酒店员工培训方案
2014/06/02 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
MySQL日期时间函数知识汇总
2022/03/17 MySQL
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers