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 相关文章推荐
JavaScript入门教程(11) js事件处理
Jan 31 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
JQuery对表单元素的基本操作使用总结
Jul 18 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
Bootstrap零基础入门教程(三)
Jul 18 Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 Javascript
原生JS实现的雪花飘落动画效果
May 03 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
javascript实现自由编辑图片代码详解
Jun 21 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 Javascript
微信小程序自定义底部弹出框动画
Nov 18 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-redis中文文档介绍
2013/02/07 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
php简单实现数组分页的方法
2016/04/30 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
2015/08/25 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
Python对象体系深入分析
2014/10/28 Python
Python下线程之间的共享和释放示例
2015/05/04 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
使用python实现多维数据降维操作
2020/02/24 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
python设置中文界面实例方法
2020/10/27 Python
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
介绍一下Java中标识符的命名规则
2014/02/03 面试题
项目副经理岗位职责
2013/12/30 职场文书
学生喝酒检讨书
2014/02/06 职场文书
优秀部门获奖感言
2014/02/14 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript