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 相关文章推荐
jQuery学习5 jQuery事件模型
Feb 07 Javascript
Javascript动态绑定事件的简单实现代码
Dec 25 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
js实现两点之间画线的方法
May 12 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
JS中验证整数和小数的正则表达式
Oct 08 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
ant design 日期格式化的实现
Oct 27 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数据库连接类~~做成一个分页类!
2006/11/25 PHP
php下过滤HTML代码的函数
2007/12/10 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
js select下拉联动 更具级联性!
2020/04/17 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
从零学习node.js之详解异步控制工具async(八)
2017/02/27 Javascript
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
Python获取Windows或Linux主机名称通用函数分享
2014/11/22 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
Python中安装easy_install的方法
2018/11/18 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
美国知名生活购物网站:Goop
2017/11/03 全球购物
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
工作表现评语
2014/01/19 职场文书
酒店节能减排方案
2014/05/26 职场文书
学校社团活动总结
2015/05/07 职场文书
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技