JS动态添加option和删除option(附实例代码)


Posted in Javascript onApril 01, 2013

1.动态创建select

function createSelect(){ 
var mySelect = document.createElement("select"); 
mySelect.id = "mySelect"; 
document.body.appendChild(mySelect); 
}

2.添加选项option
function addOption(){ 
//根据id查找对象, 
var obj=document.getElementById('mySelect'); 
//添加一个选项 
obj.add(new Option("文本","值")); //这个只能在IE中有效 
obj.options.add(new Option("text","value")); //这个兼容IE与firefox 
}

3.删除所有选项option
function removeAll(){ 
var obj=document.getElementById('mySelect'); 
obj.options.length=0; 
}

4.删除一个选项option
function removeOne(){ 
var obj=document.getElementById('mySelect'); 
//index,要删除选项的序号,这里取当前选中选项的序号 
var index=obj.selectedIndex; 
obj.options.remove(index); 
}

5.获得选项option的值
var obj=document.getElementById('mySelect'); 
var index=obj.selectedIndex; //序号,取当前选中选项的序号 
var val = obj.options[index].value;

6.获得选项option的文本
var obj=document.getElementById('mySelect'); 
var index=obj.selectedIndex; //序号,取当前选中选项的序号 
var val = obj.options[index].text;

7.修改选项option
var obj=document.getElementById('mySelect'); 
var index=obj.selectedIndex; //序号,取当前选中选项的序号 
var val = obj.options[index]=new Option("新文本","新值");

8.删除select
function removeSelect(){ 
var mySelect = document.getElementById("mySelect"); 
mySelect.parentNode.removeChild(mySelect); 
}

整个实例的完整代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html"> 
<head> 
<script language=JavaScript> 
function $(id) 
{ 
return document.getElementById(id) 
} 
function show() 
{ 
var selectObj=$("area") 
var myOption=document.createElement("option") 
myOption.setAttribute("value","10") 
myOption.appendChild(document.createTextNode("上海")) 
var myOption1=document.createElement("option") 
myOption1.setAttribute("value","100") 
myOption1.appendChild(document.createTextNode("南京")) 
selectObj.appendChild(myOption) 
selectObj.appendChild(myOption1) 
} 
function choice() 
{ 
var index=$("area").selectedIndex; 
var val=$("area").options[index].getAttribute("value") 
if(val==10) 
{ 
var i=$("context").childNodes.length-1; 
var remobj=$("context").childNodes[i]; 
remobj.removeNode(true) 
var sh=document.createElement("select") 
sh.add(new Option("浦东新区","101")) 
sh.add(new Option("黄浦区","102")) 
sh.add(new Option("徐汇区","103")) 
sh.add(new Option("普陀区","104")) 
$("context").appendChild(sh) 
} 
if(val==100) 
{ 
var i=$("context").childNodes.length-1; 
var remobj=$("context").childNodes[i]; 
remobj.removeNode(true) 
var nj=document.createElement("select") 
nj.add(new Option("玄武区","201")) 
nj.add(new Option("白下区","202")) 
nj.add(new Option("下关区","203")) 
nj.add(new Option("栖霞区","204")) 
$("context").appendChild(nj) 
} 
} 
function calc() 
{ 
var x=$("context").childNodes.length-1; 
alert(x) 
} 
function remove() 
{ 
var i=$("context").childNodes.length-1; 
var remobj=$("context").childNodes[i]; 
remobj.removeNode(true) 
} 
</script> 
<body> 
<div id="context"> 
<select id="area" onchange="choice()"> 
</select> 
</div> 
<input type=button value="显示" onclick="show()"> 
<input type=button value="计算结点" onclick="calc()"> 
<input type=button value="删除" onclick="remove()"> 
</body> 
</html>

改进版:在select中添加、修改、删除option元素
function watch_ini(){ // 初始 
for(var i=0; i<arguments.length; i++){ 
var word = document.createElement("OPTION"); 
word.text = arguments[i]; 
watch.keywords.add(word); // watch. is form name 
} 
} 
function watch_add(f){ // 增加 
var word = document.createElement("OPTION"); 
word.text = f.word.value; 
f.keywords.add(word); 
}

但上述 add() 方法只在IE下有效,为兼容FF和Opera,对上述代码进行了一下改进,改动后代码如下:
function watch_ini(){ // 初始 
for(var i=0; i<arguments.length; i++){ 
var oOption=new Option(arguments[i],arguments[i]); 
document.getElementById("MySelect")[i]=oOption; 
} 
} 
function watch_add(f){ // 增加 
var oOption=new Option(f.word.value,f.word.value); 
f.keywords[f.keywords.length]=oOption; 
}

整个实例的完整代码如下:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> 
<html> 
<head> 
<title>javascript select options text value</title> 
<meta name="keywords" content="javascript select options text value add modify delete set"> 
<meta name="description" content="javascript select options text value add modify delete set"> 
<script language="javascript"> 
<!-- 
function watch_ini(){ // 初始 
for(var i=0; i<arguments.length; i++){ 
var oOption=new Option(arguments[i],arguments[i]); 
document.getElementById("MySelect")[i]=oOption; 
} 
} 
function watch_add(f){ // 增加 
var oOption=new Option(f.word.value,f.word.value); 
f.keywords[f.keywords.length]=oOption; 
} 
function watch_sel(f){ // 编辑 
f.word.value = f.keywords[f.keywords.selectedIndex].text; 
} 
function watch_mod(f){ // 修改 
f.keywords[f.keywords.selectedIndex].text = f.word.value; 
} 
function watch_del(f){ // 删除 
f.keywords.remove(f.keywords.selectedIndex); 
} 
function watch_set(f){ // 保存 
var set = ""; 
for(var i=0; i<f.keywords.length; i++){ 
set += f.keywords[i].text + ";"; 
} 
confirm(set); 
} 
//--> 
</script> 
</head> 
<body> 
<form name="watch" method="post" action=""> 
<select id="MySelect" name="keywords" size="10" onchange="watch_sel(this.form)"></select><br> 
<script language="javascript"> 
<!-- 
watch_ini("我","你","??","他","她","它","尔"); // 初始关键词 
//--> 
</script> 
<input type="text" name="word" /><br /> 
<input type="button" value="增加" onclick="watch_add(this.form);" /> 
<input type="button" value="修改" onclick="watch_mod(this.form);" /> 
<input type="button" value="删除" onclick="watch_del(this.form);" /> 
<input type="button" value="保存" onclick="watch_set(this.form);" /> 
</form>

用一个字符串创建一个数组方法:
<script language="javascript"> 
</body> 
</html> 
<script> 
functionspli(){ 
datastr="2,2,3,5,6,6"; 
varstr=newArray(); 
str=datastr.split(","); 
for(i=0;i<str.length ;i++ ) { 
document.write(str[i]+"<br/>"); 
} } spli(); 
</script>
Javascript 相关文章推荐
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 Javascript
JavaScript设置名字输入不合法的实现方法
May 23 Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 Javascript
深入理解JavaScript的async/await
Aug 05 Javascript
Vue数据绑定实例写法
Aug 06 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
vue实现图片裁剪后上传
Dec 16 Vue.js
点击隐藏页面左栏或右栏实现js代码
Apr 01 #Javascript
jquery如何把参数列严格转换成数组实现思路
Apr 01 #Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 #Javascript
select标记美化--JS式插件、后期加载
Apr 01 #Javascript
js关闭父窗口时关闭子窗口
Apr 01 #Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 #Javascript
javascript ie6兼容position:fixed实现思路
Apr 01 #Javascript
You might like
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
php中序列化与反序列化详解
2017/02/13 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
浅谈Angular中ngModel的$render
2016/10/24 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
Python3.x和Python2.x的区别介绍
2013/02/12 Python
Python实现的简单发送邮件脚本分享
2014/11/07 Python
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
Python爬取国外天气预报网站的方法
2015/07/10 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
python数据库编程 ODBC方式实现通讯录
2020/03/27 Python
如何理解Python中的变量
2020/06/01 Python
Python中zip函数如何使用
2020/06/04 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
大学毕业通用个人的求职信
2013/12/08 职场文书
高中班长自我鉴定
2013/12/20 职场文书
考试退步检讨书
2014/01/15 职场文书
大型车展策划方案
2014/02/01 职场文书
2014年财务部工作总结
2014/11/11 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫