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 相关文章推荐
轻量级 JS ToolTip提示效果
Jul 20 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
提高Web性能的前端优化技巧总结
Feb 27 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
Apr 26 Javascript
JavaScript实现复选框全选功能
Apr 11 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
PHP4之COOKIE支持详解
2006/10/09 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
PHP实现递归无限级分类
2015/10/22 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
JS实现简单打字测试
2020/06/24 Javascript
wxPython使用系统剪切板的方法
2015/06/16 Python
快速查询Python文档方法分享
2017/12/27 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
django rest framework 过滤时间操作
2020/07/12 Python
Python中bisect的用法及示例详解
2020/07/20 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
北京天润融通.net面试题笔试题
2012/02/20 面试题
高中毕业生生活的自我评价
2013/12/08 职场文书
中学自我评价
2014/01/31 职场文书
优秀公益广告词大全
2014/03/19 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书