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 相关文章推荐
用倒置滤镜把div倒置,再把table倒置。
Jul 31 Javascript
js调用webservice中的方法实现思路及代码
Feb 25 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
Js nodeType 属性全面解析
Nov 14 Javascript
jqgrid 表格数据导出实例
Nov 21 Javascript
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
layui实现checkbox的目录树tree的例子
Sep 12 Javascript
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
Promise静态四兄弟实现示例详解
Jul 07 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值的代码(推荐)
2011/01/01 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
jquery 常用操作方法
2010/01/28 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
2011/01/23 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
vue监听scroll的坑的解决方法
2017/09/07 Javascript
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
Python中基础的socket编程实战攻略
2016/06/01 Python
python实现屏保计时器的示例代码
2018/08/08 Python
基于python实现KNN分类算法
2020/04/23 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
医院护理人员的自我评价分享
2013/10/04 职场文书
测绘工程个人的自我评价
2013/11/23 职场文书
厨师长岗位职责
2014/03/02 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
2015年采购工作总结
2015/04/10 职场文书
2015年工程师工作总结
2015/04/30 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB