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使用prototype定义对象类型
Feb 07 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
JavaScript中日期函数的相关操作知识
Aug 03 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 Javascript
layui动态表头的实现代码
Aug 22 Javascript
微信小程序canvas分享海报功能
Oct 31 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 Javascript
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
基于javascript实现移动端轮播图效果
Dec 21 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文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
Python Deque 模块使用详解
2014/07/04 Python
python的socket编程入门
2018/01/29 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
客房主管岗位职责
2013/12/09 职场文书
小学生美德少年事迹
2014/02/02 职场文书
护士的自我鉴定
2014/02/07 职场文书
银行简历自我评价
2014/02/11 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
行政求职信
2014/07/04 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技