<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. Linux运维笔记-日常操作命令总结（3）

    文本操作:sed sed是一个很好的文件处理工具,本身是一个管道命令,主要是以行为单位进行处理,可以将数据行进行替换.删除.新增.选取等特定工作. sed命令行格式为: sed [-nefri] ‘c ...

  2. Asp.net框架与SpringMvc框架简单分析

    (此文为自我总结,错误很多请勿借鉴) 1.就前两天分析SpringMvc框架中是通过controler来实现跳转页面,通过mapping来实现数据连接 分析的方法又通过java的类之间进行相互调用,个 ...

  3. 关于QQ的NABCD模型

    组名:思甜雅 关于QQ的NABCD模型 N--Need 随着电脑的普及,人们需要在网络上进行交流,现有的交流工具不够完善,不能够全部满足人们对于交流沟通中的需要. 初步了解人们的需求,人们需要一款可以 ...

  4. Kitematic - VirtualBox is not installed. Docker for windows 10

    Kitematic - VirtualBox is not installed. Docker for windows 10 https://github.com/docker/kitematic/i ...

  5. php 文件上传 $_FILES 错误码

    假设文件上传字段的名称file_name,则: $_FILES['file_name']['error']有以下几种类型 1.UPLOAD_ERR_OK 其值为 0,没有错误发生,文件上传成功. 2. ...

  6. Oracle的简单的创建dblink以及进行数据迁移的方法

    1. 创建dblink 语法如下: create public database link zhaobsh connect to lcoe739999 identified by Test6530 u ...

  7. linux_修改文件权限chmod 、改变文件/目录所有者chown

    chmod使用事例 数字方法 chmod -R 751 [FILE] ugoa方法 chmod -R u=wrx,g=rx,o=x [FILE] 说明 chmod [OPTION] [MODE] [F ...

  8. Mac上brew&thrift安装 以及在thrift架构下，自己新作了maven的小例 Demo

    1.缘由 前几天偶尔在网上看到thrift的信息,其内容和作用极大的引起了我的兴趣,因为我也是做iOS开发的,通过在网上的查询发现信息虽然很多实用的很少,容易误导他人,经过自己的成功实践,做了笔录,为 ...

  9. selenium之下载

    # 测试下载功能,保存文件到指定的目录 # 不同的浏览器配置是不同的,本例使用chrome浏览器 # author:gongxr # date:2017-07-25 import time from ...

  10. C-Lodop获取打印机列表Create_Printer_List

    C-Lodop获取打印机列表Create_Printer_List,此方法Lodop不支持,是C-Lodop特有的函数,客户端本地打印单独用c-lodop,或集中打印等,可以获得本机或云主机的打印机列 ...