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 相关文章推荐
类似框架的js代码
Nov 09 Javascript
用JavaScript获取网页中的js、css、Flash等文件
Dec 20 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
Jquery使用val方法读写value值
May 18 Javascript
JQuery fileupload插件实现文件上传功能
Mar 18 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
浅谈React Native 中组件的生命周期
Sep 08 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
详解webpack loader和plugin编写
Oct 12 Javascript
layDate日期控件使用方法详解
Nov 15 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
php结合飞信 免费天气预报短信
2009/05/07 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
javascript 播放器 控制
2007/01/22 Javascript
js parsefloat parseint 转换函数
2010/01/21 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
React-native桥接Android原生开发详解
2018/01/17 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
Python将多个list合并为1个list的方法
2018/06/27 Python
实例讲解python中的协程
2018/10/08 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
python实现邮件发送功能
2019/08/10 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
公司财务总监岗位职责
2013/12/14 职场文书
大学生收银员求职信分享
2014/01/02 职场文书
户外拓展活动方案
2014/02/11 职场文书
小学生秋游活动方案
2014/02/23 职场文书
名企HR怎样看待求职信
2014/02/23 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
自我检讨报告
2015/01/28 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
课改心得体会范文
2016/01/25 职场文书
2016年“我们的节日·端午节”活动总结
2016/04/01 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python
Android自定义双向滑动控件
2022/04/19 Java/Android