JQuery select控件的相关操作实现代码


Posted in Javascript onSeptember 14, 2012

获取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文字滚动停顿效果代码
Jun 28 Javascript
js控制框架刷新
Aug 01 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
Feb 26 Javascript
javascript调试说明
Jun 07 Javascript
一个简单的jquery进度条示例
Apr 28 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
Jul 18 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
vue框架搭建之axios使用教程
Jul 11 Javascript
JS实现自定义弹窗功能
Aug 08 Javascript
小程序如何使用分包加载的实现方法
May 22 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 #Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 #Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 #Javascript
Java 正则表达式学习总结和一些小例子
Sep 13 #Javascript
获取客户端电脑日期时间js代码(jquery)
Sep 12 #Javascript
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 #Javascript
jquery ajax例子返回值详解
Sep 11 #Javascript
You might like
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
PHP 开源AJAX框架14种
2009/08/24 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
开启PHP的伪静态模式
2015/12/31 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
js 字符串操作函数
2009/07/25 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
python生成随机验证码(中文验证码)示例
2014/04/03 Python
Python删除空文件和空文件夹的方法
2015/07/14 Python
Python基础中所出现的异常报错总结
2016/11/19 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
实时获取Python的print输出流方法
2019/01/07 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
200行python代码实现2048游戏
2019/07/17 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
Python可以用来做什么
2020/11/23 Python
计算机专业应届毕业生自荐信
2013/09/26 职场文书
大专毕业生自我鉴定
2013/11/21 职场文书
美食节目策划方案
2014/05/31 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL