改进版:在select中添加、修改、删除option元素
今天休完年假从家回来后,看到小林在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;
}
整个实例的完整代码如下:
javascript select options text value
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关推荐
-
jquery操作select option 的代码小结
1.获取选中select的value和text,html代码如下: 复制代码 代码如下: <select id="mySelect"> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> </selec
-
js添加select下默认的option的value和text的方法
<pre name="code" class="java"> jsp 中的下拉框标签: <s:select name="sjx" id="sjx" list="sjxList" listKey="BM" listValue="MC" size="20" cssStyle="width:100%;height:70px;
-
如何获取select下拉框的值(option没有及有value属性)
如何获取select下拉框的值: 1.下拉框的option没有value属性时 复制代码 代码如下: <select id="param1"> <option>学号</option> <option>姓名</option> <option>年龄</option> </seclect> <script> window.onload = funciton(){ var param =
-
删除select中所有option选项jquery代码
这样写 复制代码 代码如下: <select id="search"> <option>baidu</option> <option>sogou</option> </select> 清空: 复制代码 代码如下: $("#search").find("option").remove(); 或者 $("#search").empty();
-
浅谈下拉菜单中的Option对象
1.创建Option对象 1.1 var optionEle1 = document.createElement('option'); 1.2 var optionEle2 = new Option(text, value, defaultSelected, selected); 2.options属性 2.1 select.options返回select标签下面的Option对象的集合 3.清空下拉菜单 3.1 利用for循环删除,注意数组长度的动态变化 3.2 select.options.
-
JS获取select-option-text_value的方法
HTML代码: 复制代码 代码如下: <select id="month" onchange="selectInput(this)"> <option value="01">January</option> <option value="02">February</option> <option value="03"&
-
浅析jQuery对select操作小结(遍历option,操作option)
//遍历option和添加.移除optionfunction changeShipMethod(shipping){ var len = $("select[@name=ISHIPTYPE] option").length if(shipping.value != "CA"){ $("select[@name=ISHIPTYPE] option").each(function(){ if($(this).val() == 111){
-
javascript Select标记中options操作方法集合
javascript操作Select标记中options集合 先来看看options集合的这几个方法: options.add(option)方法向集合里添加一项option对象: options.remove(index)方法移除options集合中的指定项: options(index)或options.item(index)可以通过索引获取options集合的指定项: javascript代码如下: var selectTag = null; //select标记 var OPTONLEN
-
JQuery中对Select的option项的添加、删除、取值
jQuery获取Select选择的Text和Value: 复制代码 代码如下: $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text var checkValue=$("#select_id
-
JS动态添加与删除select中的Option对象(示例代码)
如下所示: 复制代码 代码如下: //动态删除select中的所有options: function delAllOptions(){ document.getElementById("user_dm").options.length=0; } //动态删除select中的某一项option: function delOneOption(index){ document.getElementById("user_dm").o
-
js获取select默认选中的Option并不是当前选中值
js函数方法: 复制代码 代码如下: <script> function getDefaultSelectedOption(selectId, valIfNull) { var dom, selectId = selectId.replace(/^#/, ''), opts; try { opts = document.getElementById(selectId).getElementsByTagName('option'); for (var i in opts) { if (opts[
-
js select option对象小结
一基础理解: var e = document.getElementById("selectId"); e. options= new Option("文本","值") ; //创建一个option对象,即在<select>标签中创建一个或多个<option value="值">文本</option> //options是个数组,里面可以存放多个<option value="
随机推荐
- Win10上VMware workstation安装图文教程
- 用VBScript收集系统信息并上传到ftp空间
- 详解spring mvc对异步请求的处理
- iOS开发中使用UIScrollView实现无限循环的图片浏览器
- JS获取当前日期和时间的简单实例
- 2个页面间不通过Session与url的传值方式
- Asp.net中时间格式化的6种方法详细总结
- JSP中通过Servlet 将服务器硬盘图片并展示到浏览器
- vuejs2.0运用原生js实现简单的拖拽元素功能示例
- jQuery随便控制任意div隐藏的方法
- HTML DOM Viewer
- CSS Filter背景透明提示
- Windows下tomcat安装教程
- Spring AOP手动实现简单动态代理的代码
- java实现图片上插入文字并保存
- 解决python多行注释引发缩进错误的问题
- pytest中文文档之编写断言
- 浅谈Python里面小数点精度的控制
- ajax上传图片到PHP并压缩图片显示的方法
- 详解Java代码常见优化方案