<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. mariadb第二章-增删改

    MariaDB 数据类型 MariaDB数据类型可以分为数字,日期和时间以及字符串值. 使用数据类型的原则:够用就行, 尽量使用范围小的,而不用大的 常用的数据类型 整数:int, bit 小数:de ...

  2. css3 动画效果实现

    前沿 在工作中,经常有一些需要切换的交互样式.如果直接在两种状态之间切换,就显得有点生硬.加上一些动画效果就会好很多. 示例1:点击的三角切换 实现过程 第一步实现这个三角形 用的svg 的多边形画法 ...

  3. D. Fun with Integers

    链接 [http://codeforces.com/contest/1062/problem/D] 题意 给你n,让你从2到n这个区间找任意两个数,使得一个数是另一个的因子,绝对值小的可以变为绝对值大 ...

  4. Linux内核分析第四章 读书笔记

    Linux内核分析第四章 读书笔记 第一部分--进程调度 进程调度:操作系统规定下的进程选取模式 面临问题:多任务选择问题 多任务操作系统就是能同时并发地交互执行多个进程的操作系统,在单处理器机器上这 ...

  5. 07-java学习-方法重载-idea集成开发工具学习-项目-模块-包

    方法重载的概念? 方法重载的好处? 集成开发工具idea的学习 下载 安装 设置 建项目 导入项目 建模块 导入模块 建包 复制粘贴包 建类 复制粘贴类 运行 调试

  6. K 班前7次作业成绩汇总

    K 班前7次作业成绩汇总 得分榜 千帆竞发 详细 短学号 名 1 2 3 4 5 6 7 TOTAL 505 基智 4.55 1 -2 0 0 -10 4.37 -2.08 414 圳源 5.43 2 ...

  7. 量产救U盘

    同事U盘不能格式化,快速格式化失败,非快速格式化也失败.就问谁有360安全软件,试试能不能格式化. 我说我有火绒,但是不知道火绒并没有格式化U盘的功能(应该没有吧,反正我找了以后没找到) 那怎么办呢? ...

  8. sql优化问题笔记（mysql）

    相信大家平时面试都会遇到这个问题:平时你都是怎么对sql进行调优的? 此篇文章相当于一个随便笔记,根据朋友们的聊天记录整理而成,如有不对,请指正! 注意:这篇是以mysql整理的 查看sql计划分析 ...

  9. 使用pygal_maps_world.i18n中数据画各大洲地图

    源码: # 使用pygal_maps_world.i18n中数据画各大洲地图 from pygal_maps_world.i18n import ASIA from pygal_maps_world ...

  10. 认真学习Linux系统让你真的有收获

    学习,最重要的是有一个认真的态度,熟话说,读书可以改变命运,以前觉得并不一定是这样,其实经历的多了才知道,事实确实如此.试想一个不会写字看书的人,他的生活该有多么无聊.读书容易,但读好书并不总是件容易 ...