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 相关文章推荐
use jscript Create a SQL Server database
Jun 16 Javascript
javascript面向对象之二 命名空间
Feb 08 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 Javascript
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 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
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python将ip地址转换成整数的方法
2015/03/17 Python
python处理图片之PIL模块简单使用方法
2015/05/11 Python
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
Python中浅拷贝copy与深拷贝deepcopy的简单理解
2018/10/26 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
四好少年事迹材料
2014/01/12 职场文书
违反学校规定检讨书
2014/01/18 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
公务员考察材料
2014/12/23 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
Python 中 Shutil 模块详情
2021/11/11 Python
Python Pandas 删除列操作
2022/03/16 Python