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 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
各浏览器对click方法的支持差异小结
Jul 31 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
小程序实现发表评论功能
Jul 06 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
vue-router的两种模式的区别
May 30 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 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加密解密函数(动态加密)
2013/06/19 PHP
php获取从百度、谷歌等搜索引擎进入网站关键词的方法
2015/07/08 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
js 判断 enter 事件
2009/02/12 Javascript
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
说说node中的可读流和可写流的区别
2018/06/01 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
机械工程系毕业生求职信
2013/09/27 职场文书
CNC数控操作工岗位职责
2013/11/19 职场文书
物业管理计划书
2014/01/10 职场文书
创业资金计划书
2014/02/06 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
关于读书的活动方案
2014/08/14 职场文书