jquery操作select option 的代码小结


Posted in Javascript onJune 21, 2011

1、获取选中select的value和text,html代码如下:

<select id="mySelect"> 
<option value="1">one</option> 
<option value="2">two</option> 
<option value="3">three</option> 
</select>

则可通过以下script代码s来获取选中的value和text
$("#mySelect").val(); //获取选中记录的value值 
$("#mySelect option:selected").text(); //获取选中记录的text值

2、运用new Option("文本","值")方法添加选项option
var obj = document.getElementById("mySelect"); 
obj.add(new Option("4","4"));

3、删除所有选项option
var obj = document.getElementById("mySelect"); 
obj.options.length = 0;

4、删除选中选项option
var obj = document.getElementById("mySelect"); 
var index = obj.selectedIndex; 
obj.options.remove(index);

5、修改选中选项option
var obj = document.getElementById("mySelect"); 
var index = obj.selectedIndex; 
obj.options[index] = new Option("three",3); //更改对应的值 
obj.options[index].selected = true; //保持选中状态

6、删除select
var obj = document.getElementById("mySelect"); 
obj.parentNode.removeChild(obj); //移除当前对象

7、select选择的响应事件
$("#mySelect").change(function(){ 
//添加所需要执行的操作代码 
})
Javascript 相关文章推荐
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
一些常用且实用的原生JavaScript函数
Sep 08 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
JavaScript闭包_动力节点Java学院整理
Jun 27 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 Javascript
jquery随意添加移除html的实现代码
Jun 21 #Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 #Javascript
基于jquery实现的表格分页实现代码
Jun 21 #Javascript
jquery异步请求实例代码
Jun 21 #Javascript
读jQuery之九 一些瑕疵说明
Jun 21 #Javascript
读jQuery之八 包装事件对象
Jun 21 #Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 #Javascript
You might like
PHP操作XML作为数据库的类
2010/12/19 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
浅谈JavaScript作用域和闭包
2017/09/18 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
js实现全选和全不选
2020/07/28 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
Python实例之wxpython中Frame使用方法
2014/06/09 Python
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
Python守护进程用法实例分析
2015/06/04 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
购买原创艺术品:Zatista
2019/11/09 全球购物
校领导推荐信
2013/11/01 职场文书
学生自我评价范文
2014/02/02 职场文书
交通事故赔偿协议书
2014/04/15 职场文书
《画风》教学反思
2014/04/16 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
作风建设年度心得体会
2014/10/29 职场文书
2015年中秋节活动总结
2015/03/23 职场文书
商务信函英语问候语
2015/11/10 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书