<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. THE First Individual Project - Word frequency program

    第一次写博客,这次也是本学期写到第一个程序. 老师要求网址:http://www.cnblogs.com/jiel/p/3311400.html#2777556 一.项目预计时间 一开始想使用不熟悉的 ...

  2. linux内核分析第六次实验

    使用gdb跟踪创建新进程的过程 rm menu -rf git clone https://github.com/mengning/menu.git  mv test_fork.c test.c  执 ...

  3. Junit测试用例

    一.题目简介 返回一个给定整数参数的绝对值. 二.源码的github链接 https://github.com/liyan941016/test/blob/master/FileTest.java h ...

  4. Atcoder D - Knapsack 1 （背包）

    D - Knapsack 1 Time Limit: 2 sec / Memory Limit: 1024 MB Score : 100100 points Problem Statement The ...

  5. [buaa-SE-2017]个人项目

    个人项目 Part1:github https://github.com/Aria-K-Alethia/Sudoku Part2:解题思路描述 关于数独的解法 我选择的是暴力搜索算法. (1)关于 - ...

  6. PHP使用Redis实现消息队列

    消息队列可以使用MySQL来实现,可以参考博客PHP使用MySQL实现消息队列,虽然用MySQL可以实现,但是一般不这么用,因为MySQL的数据都存在硬盘中,而从硬盘中对MySQL的操作,I/O花费的 ...

  7. CentOS查看版本及架构信息

    https://blog.csdn.net/shuaigexiaobo/article/details/78030008

  8. STL数据结构

    priority_queue "C++ reference"上如此解释priority queue:"This context is similar to a heap, ...

  9. 小项目分析之C++ 实现模拟银行排队

      一.问题定义与分析 问题定义 •要解决的问题——银行一天之内的: 1.总客户数 2.客户总逗留时间 3.客户平均逗留时间 问题分析 •新来的人找个短的队伍,站在队尾开始排队 •排在队头的人可以办理 ...

  10. 微信内置浏览器在使用video标签时（安卓）默认全屏的原因及解决办法

    根据X5论坛得到的答案是:设计如此. 腾讯真是越来越嚣张了,一家独大后用户体验都不注重了(不给程序员留活路). 听说有个申请加入vdeo白名单的,域名验证后就可以解决默认全屏(反正我是没见过申请入口, ...