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 相关文章推荐
jquery里的each使用方法详解
Dec 22 Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
jquery $.each() 使用小探
Aug 23 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
js数组常见操作及数组与字符串相互转化实例详解
Nov 10 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
js严格模式总结(分享)
Aug 22 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
从0搭建vue-cli4脚手架
Jun 17 Javascript
vue+element实现图片上传及裁剪功能
Jun 29 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
模仿OSO的论坛(二)
2006/10/09 PHP
php2html php生成静态页函数
2008/12/08 PHP
PHP 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
php学习之 循环结构实现代码
2011/06/09 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
深入探讨javascript函数式编程
2015/10/11 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
家长寄语大全
2014/04/02 职场文书
无刑事犯罪记录证明
2014/09/18 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
雨中的树观后感
2015/06/03 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
MySQL中日期型单行函数代码详解
2021/06/21 MySQL
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis