jquery操作select option 的代码小结
更新时间：2011年06月21日 23:28:18 作者：
jquery操作select option 的代码小结,需要的朋友可以参考下。
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(){
//添加所需要执行的操作代码
})
复制代码 代码如下:
<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(){
//添加所需要执行的操作代码
})
您可能感兴趣的文章:
- jquery操作select详解(取值,设置选中)
- jquery实现动态操作select选中
- jQuery操作select下拉框的text值和value值的方法
- 利用jquery操作select下拉列表框的代码
- jQuery操作Select的Option上下移动及移除添加等等
- jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
- jquery操作select大全
- jQuery操作select的实例代码
- jquery操作select元素和option的实例代码
- jquery下拉select控件操作方法分享(jquery操作select)
- jquery操作select常见方法大全【7种情况】
相关文章
这篇文章主要介绍了jQuery操作iframe中js函数的方法,结合实例形式总结分析了jQuery操作iframe中的元素、函数常用方法与注意事项,具有一定参考借鉴价值,需要的朋友可以参考下2016-07-07
依据className实现的Tab选项框，支持多个tab，需要的朋友可以参考下。2011-03-03
本文给大家分享的是使用jQuery制作的模仿百度时间轴特效的代码，效果非常不错，有需要的小伙伴可以参考下。2015-07-07
Easyui Datagrid自定义按钮列(最后面的操作列)
做项目的时候因为需求,要在表格的最后添加一列操作列,easyUI貌似没有提供这种功能，下面我们来自定义按钮列，具体实现代码，大家参考下本文吧2017-07-07
这篇文章主要为大家详细介绍了jQuery实现可编辑的表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
jquery对象和DOM对象在使用过程很频繁，正是因为如此，好多朋友都不知道它们之间有什么区别，下面为大家详细介绍下，希望对大家有所帮助2013-08-08
Tab页界面 用jQuery及Ajax技术实现(php后台)
到了B/S开发时代，网页前端布局也把Tab页的布局形式吸收了过来。特别是和Ajax技术结合起来，可以更充分发挥Tab页的良好表现力和数据缓存的优势，是一种良好的网页布局形式2011-10-10
这篇文章主要介绍了jquery获取及设置outerhtml的方法,实例分析了jQuery实现针对outerhtml操作的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了jQuery实现的自定义轮播图功能,结合实例形式详细分析了轮播图的原理、实现步骤及相关操作技巧,需要的朋友可以参考下2018-12-12
使用基于jquery的gamequery插件做JS乒乓球游戏
现在jquery比较流行，用js做游戏的也越来越多了，虽然现在html5出来了，但实际上要用html5做点啥出来还是得靠javascript，所以学好js是非常重要的2011-07-07
最新评论