js 添加、修改、删除select中option元素的实现代码

发布时间:2019-12-01编辑:脚本学堂
本文介绍下,用js实现添加、修改、删除select下拉框中option元素的代码,有需要的朋友不妨研究下。

用js实现添加、修改或删除select中的option选项,其核心原理用的是select元素的 add() 方法:
 

复制代码 代码示例:
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").options[i]=oOption;
 }
}
function watch_add(f){ // 增加
  var oOption=new Option(f.word.value,f.word.value);
  f.keywords.options[f.keywords.length]=oOption;
}

完整代码:
 

复制代码 代码示例:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>添加、修改、删除select中option元素-www.jb200.com</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").options[i]=oOption;
 }
}
function watch_add(f){ // 增加
  var oOption=new Option(f.word.value,f.word.value);
  f.keywords.options[f.keywords.length]=oOption;
}
function watch_sel(f){ // 编辑
 f.word.value = f.keywords.options[f.keywords.selectedIndex].text;
}
function watch_mod(f){ // 修改
 f.keywords.options[f.keywords.selectedIndex].text = f.word.value;
}
function watch_del(f){ // 删除
 f.keywords.options.remove(f.keywords.selectedIndex);
}
function watch_set(f){ // 保存
 var set = "";
 for(var i=0; i<f.keywords.length; i++){
 set += f.keywords.options[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>
 
<script language="javascript">
<!--
watch_ini("我","你","妳","他","她","它","尔"); // 初始关键词
//-->
</script>
<input type="text" name="word" />
<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>
</body>
</html>

>>> 您可能感兴趣的文章:
JavaScript 移动和重排option选项的方法
JavaScript 移除option选项的方法
JavaScript 选择option选项的方法
JavaScript 添加option选项的方法
js动态添加与删除 select option的代码
javasript 操作select中option的常用方法
js获取select下拉标签中option的属性值
js删除select下拉列表框中option选项的多种方法(附代码)
js移动(增加删除)select option的实现代码
js 控制select下拉列表框中option选项的上下移动
Js动态添加select的option选项的代码
javascript操作Select options集合的实例介绍
JS动态添加与删除option选项的代码
js页面跳转 option location页面跳转的代码实例