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 相关文章推荐
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
异步JS框架的作用以及实现方法
Oct 29 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 Javascript
JS实现4位随机验证码
Oct 19 Javascript
点击隐藏页面左栏或右栏实现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
各种咖啡的英文名子是什么
2021/03/03 新手入门
php异常处理技术,顶级异常处理器
2012/06/13 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
Python3实现从指定路径查找文件的方法
2015/05/22 Python
对于Python装饰器使用的一些建议
2015/06/03 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
python实现简单登陆系统
2018/10/18 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
python tkinter控件布局项目实例
2019/11/04 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
在python image 中实现安装中文字体
2020/05/16 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
经理助理岗位职责
2014/03/05 职场文书
社区居务公开实施方案
2014/03/27 职场文书
保护环境倡议书300字
2014/05/19 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
如何有效防止sql注入的方法
2021/05/25 SQL Server