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 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
aspx中利用js实现确认删除代码
Jul 22 Javascript
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
JS的location.href跳出框架打开新页面的方法
Sep 04 Javascript
Javascript获取当前日期的农历日期代码
Oct 08 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
js实现横向拖拽导航条功能
Feb 17 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
浅谈手写node可读流之流动模式
Jun 01 Javascript
基于javascript的拖拽类封装详解
Apr 19 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 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中的UNICODE 编码与解码
2013/06/29 PHP
php算法实例分享
2015/07/14 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
学习ExtJS TextField常用方法
2009/10/07 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
AngularJS实现根据变量改变动态加载模板的方法
2016/11/04 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
2017/01/20 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
python算法题 链表反转详解
2019/07/02 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
自我评价的正确写法
2013/09/19 职场文书
计算机科学与技术应届生求职信
2013/11/07 职场文书
五年级科学教学反思
2014/02/05 职场文书
护士毕业实习感言
2014/03/05 职场文书
团队精神口号
2014/06/06 职场文书
户籍证明格式
2014/09/15 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
简爱电影观后感
2015/06/10 职场文书
大学生军训感言
2015/08/01 职场文书
详解Vue router路由
2021/11/20 Vue.js