js 操作select与option(示例讲解)


Posted in Javascript onDecember 20, 2013

1.动态创建select

     function createSelect(){
var mySelect = document.createElement_x("select");
          mySelect.id = "mySelect"; 
          document.body.appendChild(mySelect);
      }

2.添加选项option
     function addOption(){
          //根据id查找对象,
           var obj=document.getElementByIdx_x('mySelect');
           //添加一个选项
obj.add(new Option("文本","值"));    //这个只能在IE中有效
         obj.options.add(new Option("text","value")); //这个兼容IE与firefox
     }

3.删除所有选项option
     function removeAll(){
           var obj=document.getElementByIdx_x('mySelect');
obj.options.length=0;
     }

4.删除一个选项option
function removeOne(){
           var obj=document.getElementByIdx_x('mySelect');
           //index,要删除选项的序号,这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
     }

5.获得选项option的值

var obj=document.getElementByIdx_x('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].value;

6.获得选项option的文本

var obj=document.getElementByIdx_x('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].text;

7.修改选项option

var obj=document.getElementByIdx_x('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index]=new Option("新文本","新值");

8.删除select

function removeSelect(){
var mySelect = document.getElementByIdx_x("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.getElementByIdx_x(id)
    }
    function show()
    {
     var selectObj=$("area")
     var myOption=document.createElement_x("option")
     myOption.setAttribute("value","10")
     myOption.appendChild(document.createTextNode("上海"))
     var myOption1=document.createElement_x("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_x("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_x("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_x("OPTION");
word.text = arguments[i];
watch.keywords.add(word); // watch. is form name
}
}
function watch_add(f){ // 增加
var word = document.createElement_x("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.getElementByIdx_x("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.getElementByIdx_x("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>
function spli(){
datastr="2,2,3,5,6,6";      
var str= new Array();    
   str=datastr.split(",");      
    for (i=0;i<str.length ;i++ )   
     { document.write(str[i]+"<br/>");  }   
}   
spli();   
</script>

今天调试了一段js,在ie上运行良好,在火狐上调试出现错误,查资料发现

obj.add(new Option("文本","值"));    //这个只能在IE中有效
         obj.options.add(new Option("text","value")); //这个兼容IE与firefox

因为这段代码,在网上查资料收藏了这篇文章,实时的温故js

Javascript 相关文章推荐
ext checkboxgroup 回填数据解决
Aug 21 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
chrome不支持form.submit的解决方案
Apr 28 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
JavaScript中const、var和let区别浅析
Oct 11 Javascript
AngularJS实现ajax请求的方法
Nov 22 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 Javascript
Ajax异步刷新功能及简单案例
Nov 20 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
Dec 20 #Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 #Javascript
js select option对象小结
Dec 20 #Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 #Javascript
js与jQuery 获取父窗、子窗的iframe
Dec 20 #Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 #Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 #Javascript
You might like
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
python爬虫常用的模块分析
2014/08/29 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
Python常见字典内建函数用法示例
2018/05/14 Python
python实时监控cpu小工具
2018/06/21 Python
python字符串循环左移
2019/03/08 Python
python面向对象法实现图书管理系统
2019/04/19 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
戴尔英国官网:Dell英国
2017/05/27 全球购物
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
软件测试面试题
2014/01/05 面试题
青年教师师德演讲稿
2014/08/26 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
2015年科室工作总结
2015/04/10 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
python中如何对多变量连续赋值
2021/06/03 Python
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang