<script type="text/javascript">

     //    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);

     }

 </script>

 <!--//整个实例的完整代码如下：-->

 <!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>

 <!--改进版：-->

 <script type="text/javascript">

     //改进版：在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;

     }

 </script>

 <!--整个实例的完整代码如下：-->

 <!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>

 </body>

 </html>

 <script>

     //用一个字符串创建一个数组方法:

     function spli() {

         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>

原生js操作option的更多相关文章

  1. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  2. 原生js操作Dom节点:CRUD

    知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...

  3. 原生js操作DOM基础-笔记

    原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...

  4. 原生js操作dom的方法

    今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. documen ...

  5. 原生Js操作DOM

    查找DOM .querySelectorAll(),它接受包含一个CSS选择器的字符串参数,返回一个表示文档中匹配选择器的所有元素的NodeList元素. .querySelector(),返回第一个 ...

  6. 原生JS操作iframe里的dom

    转:http://www.css88.com/archives/2343 一.父级窗口操作iframe里的dom JS操作iframe里的dom可是使用contentWindow属性,contentW ...

  7. 原生js 操作dom

    1.一些常用的方法 obj.getElementById() 返回带有指定 ID 的元素. obj.getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节 ...

  8. 表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）

    看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...

  9. 原生JS操作object HTMLTableSectionElement 对象,获取行数

    html页面 <tbody id="infoTab"> <tr class="fomat"> <td class="bl ...

随机推荐

  1. BZOJ3782 上学路线

    设障碍个数为,\(obs\)则一般的容斥复杂度为\(O(2^{obs})\).但因为这个题是网格图,我们可以用DP解.设\(f[i]\)表示不经过任何障碍到达第\(i\)个障碍的方案数,转移时枚举可以 ...

  2. 《Linux内核分析》第六周学习小结

    进程的描述和进程的创建 一．进程的描述 进程描述符task_struct数据结构: (1)操作系统的三大功能: 进程管理.内存管理.文件系统 (2)进程的作用: 将信号.进程间通信.内存管理和文件系统 ...

  3. HDOJ2009_求数列的和

    简单的考察对浮点数使用的水题 HDOJ2009_求数列的和 #include<iostream> #include<stdio.h> #include<stdlib.h& ...

  4. css - 背景图片充满整个屏幕

    body { /* 加载背景图 */ background: url("../static/images/index/backImg.jpg") no-repeat; /* 背景图 ...

  5. Debian中APT的前世今生

    https://baike.baidu.com/item/apt-get/2360755 https://www.debian.org/doc/manuals/debian-handbook/sect ...

  6. SpringMvc 文件上传注意事项

    前端 1.表单提交方法与格式 <form class="form-horizontal" action="/biz/patent/edit" method ...

  7. Java Date Compare

    Date a;Date b;假设现在你已经实例化了a和ba.after(b)返回一个boolean,如果a的时间在b之后(不包括等于)返回true b.before(a)返回一个boolean,如果b ...

  8. SQLSERVER 2014 SP1 的服务器 日志文件无法收缩的处理

    1. 公司一台服务器 日子会文件到了 100g+ 但是无法收缩 2. 根据同事的经验进行验证 dbcc loginfo 单独看改数据库的 dbcc loginfo("CWBASEGS60&q ...

  9. python模块_多重继承的MRO

    MRO(Method Resolution Order):方法解析顺序.Python语言包含了很多优秀的特性,其中多重继承就是其中之一,但是多重继承会引发很多问题,比如二义性,Python中一切皆引用 ...

  10. python之使用heapq()函数计算列表中数值大小

    # heapq函数:计算列表最大几个值和最小几个值 # 语法:heapq.nlargest(n, list,[key]) # n表示最大或最小的几个: list为分析的对象: key为排序关键字,非必 ...