改进版：在select中添加、修改、删除option元素
更新时间：2006年10月24日 00:00:00 作者：
今天休完年假从家回来后，看到小林在QQ发的“监控管理示范代码”，核心原理用的是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;
}
整个实例的完整代码如下：
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
复制代码 代码如下:
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;
}
整个实例的完整代码如下：
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
您可能感兴趣的文章:
- javascript Select标记中options操作方法集合
- jquery操作select option 的代码小结
- 浅析jQuery对select操作小结(遍历option,操作option)
- 删除select中所有option选项jquery代码
- JQuery中对Select的option项的添加、删除、取值
- 如何获取select下拉框的值(option没有及有value属性)
- js select option对象小结
- JS动态添加与删除select中的Option对象(示例代码)
- JS动态添加与删除select中的Option对象(示例代码)
- JS获取select-option-text_value的方法
- js获取select默认选中的Option并不是当前选中值
- js添加select下默认的option的value和text的方法
- 浅谈下拉菜单中的Option对象
相关文章
看起来现在经常用到这样的效果来提高用户体验，所以就没事写了一个输入框提示列表的效果 使用宽屏的朋友麻烦帮忙测试下，列表的位置有没有错位。2008-08-08
传统的select控件比较难看，用css美化也达不到好的效果，而javascript和css结合起来，用div等元素模拟一个select达到想要的效果就很容易了。2008-06-06
本文介绍了JavaScript中表单操作以及表单域，下面我们来一起学习一下吧2019-05-05
textarea高度控制代码2008-07-07
JavaScript Select和Option列表元素上下左右移动
支持一次选中多项在左右列表中来回移动2008-12-12
input、button的不同type值在ajax提交表单时导致的陷阱
最近在公司的项目中尝试着利用YUI来实现各种效果。2009-02-02
一个流行且实用的JS表单验证提示，演示了怎么自定义错误信息的显示方式，同时通过写FormValid.showError类方法来实现错误显示方式自定义.2009-11-11
textbox 在光标位置插入字符功能的js实现(兼容ie,firefox)
document.selection.createRange是IE独有的 而firefox也有独有的一套2009-12-12
javascript在一段文字中的光标处插入其他文字...2007-08-08
检测邮箱地址是否合法 Check Mail Address (For: IE5+、FF1.06、Opera 7+ ...
检测邮箱地址是否合法 Check Mail Address (For: IE5+、FF1.06、Opera 7+ ...)[...2006-12-12
最新评论