JavaScript操作select元素和option的实例代码


Posted in Javascript onJanuary 29, 2016

废话不多说了,直接给大家贴代码,具体代码如下所示:

<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w.org//xhtml">
<head>
<title></title>
<!--添加jquery-->
<script src="../Script/jQuery/jquery-...min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
createSelect("select", "addSel");
addOption("addSel", "first", "第一个数据");
addOption("addSel", "secord", "第二个数据");
addOption("addSel", "three", "第三个数据");
addOption("addSel", "four", "第四个数据");
addOption("addSel", "fives", "第五个数据");
removeOneByIndex("addSel", );
removeOneByObj("addSel", "secord");
//添加一个option更改事件 调用自己写的方法
$("#addSel").change(function () {
alert("旧文本:"+getOptionText("addSel") + "旧Value:" + getOptionValue("addSel"));
editOptions("addSel", "新文本","新Value"); //注意:不传value值的时候 value值默认为text的值
alert("新文本:" + getOptionText("addSel") + "新Value:" + getOptionValue("addSel"));
})
})
//动态创建带id的元素
function createSelect(element, id) {
var select = document.createElement(element);
select.id = id;
document.body.appendChild(select);
}
//根据select的id 添加选项option
function addOption(selectID,value,text) {
//根据id查找对象, 
var obj = document.getElementById(selectID); 
obj.options.add(new Option(text, value)); //这个兼容IE与firefox 
}
//删除所有选项option
function removeAll(selectID) {
var obj = document.getElementById(selectID);
obj.options.length = ;
}
//根据 index 值删除一个选项option
function removeOneByIndex(selectID,index) {
var obj = document.getElementById(selectID);
//index,要删除选项的序号,这里取当前选中选项的序号 
//var index = obj.selectedIndex;//获取选中的选项的index;
obj.options.remove(index);
}
//根据 value或者text值删除一个选项option
function removeOneByObj(selectID, textOrValue) {
var obj = document.getElementById(selectID);
//index,要删除选项的序号,这里取当前选中选项的序号 
//var index = obj.selectedIndex;//获取选中的选项的index;
for (var i = ; i < obj.options.length; i++) {
if (obj.options[i].innerHTML == textOrValue || obj.options[i].value == textOrValue) {
obj.options.remove(i);
break;
}
}
} 
//获得一个Option Value;
function getOptionValue(selectID){
var obj = document.getElementById(selectID); 
var index=obj.selectedIndex; //序号,取当前选中选项的序号 
var val = obj.options[index].value;
return val;
} 
//获得一个option Text;
function getOptionText(selectID) {
var obj = document.getElementById(selectID); 
var index=obj.selectedIndex; //序号,取当前选中选项的序号 
var val = obj.options[index].text;
return val;
}
//修改选中的option
function editOptions(selectID,newText,newValue) {
var obj = document.getElementById(selectID); 
var index=obj.selectedIndex; //序号,取当前选中选项的序号 
obj.options[index] = new Option(newText, newValue);
obj.options[index].selected = true;
}
//删除select
function removeSelect(){
var select = document.getElementById("select"); 
select.parentNode.removeChild(select); 
}
</script>
</head>
<body>
</body>
</html>

以上所述是小编给大家分享的JavaScript操作select元素和option的实例代码,希望对大家有所帮助。

Javascript 相关文章推荐
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
EXT中xtype的含义分析
Jan 07 Javascript
js网页中的(运行代码)功能实现思路
Feb 04 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
解决VUE双向绑定失效的问题
Oct 29 Javascript
浅谈JSON5解决了JSON的两大痛点
Dec 14 Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 #Javascript
Angularjs中UI Router全攻略
Jan 29 #Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 #Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 #Javascript
JavaScript数据结构与算法之链表
Jan 29 #Javascript
动态创建按钮的JavaScript代码
Jan 29 #Javascript
JavaScript数据结构与算法之栈与队列
Jan 29 #Javascript
You might like
用在PHP里的JS打印函数
2006/10/09 PHP
一个数据采集类
2007/02/14 PHP
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
深入PHP操作MongoDB的技术总结
2013/06/02 PHP
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
浅谈function(函数)中的动态参数
2017/04/30 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
celery4+django2定时任务的实现代码
2018/12/23 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
Python循环实现n的全排列功能
2019/09/16 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
python实现单机五子棋
2020/08/28 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
项目建议书怎么写
2014/05/15 职场文书
计算机专业自荐信
2015/03/05 职场文书