原生js操作option

 <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的更多相关文章

框架操作DOM和原生js操作DOM比较
问题引出对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
原生js操作Dom节点:CRUD
知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...
原生js操作DOM基础-笔记
原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...
原生js操作dom的方法
今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. documen ...
原生Js操作DOM
查找DOM .querySelectorAll(),它接受包含一个CSS选择器的字符串参数,返回一个表示文档中匹配选择器的所有元素的NodeList元素. .querySelector(),返回第一个 ...
原生JS操作iframe里的dom
转:http://www.css88.com/archives/2343 一.父级窗口操作iframe里的dom JS操作iframe里的dom可是使用contentWindow属性,contentW ...
原生js 操作dom
1.一些常用的方法 obj.getElementById() 返回带有指定 ID 的元素. obj.getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节 ...
表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）
看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...
原生JS操作object HTMLTableSectionElement 对象,获取行数
html页面 <tbody id="infoTab"> <tr class="fomat"> <td class="bl ...

随机推荐

《Linux内核分析》第五周学习笔记
<Linux内核分析>第五周学习笔记扒开系统调用的三层皮(下) 郭垚原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.c ...
SVN解决冲突
SVN冲突出现场景如今是一个团结协作的时代,开发一个系统,往往会多人协作共同完成.版本管理是必不可少的,常用的软件有Git,SVN等.今天说一下,SVN管理版本时,如果出现冲突后,如何快速解决冲突. ...
[BUAA_SE_2017]个人项目-Sudoku
个人项目作业-数独 Github项目地址时间预估 PSP2.1 Personal Software Process Stages 预估时间(分钟) 实际耗时(分钟) Planning 计划 60 · ...
maven 总结
[转帖]Intel新一代Xeon完整曝光
AMD已经官宣7nm工艺的第二代EPYC霄龙服务器平台,今年上半年就会大规模出货,而在Intel这边,由于10nm工艺进展还是不够快,在服务器上还是需要14nm继续打天下,而且还有两代14nm工艺产品 ...
Linux下OSG的编译和安装以及遇到的问题
(第一段日常扯蛋,大家不要看)由于我们教研室所做的RTMapper要用到GDAL,所以就打算看osgearth的源码来熟悉下GDAL库的使用,同时也了解下osgearth中关于带有高程的图像拼接.然而 ...
搭建Spark所遇过的坑
一.经验 1.Spark Streaming包含三种计算模式:nonstate .stateful .window 2.kafka可通过配置文件使用自带的zookeeper集群 3.Spark一切操作 ...
转《canvas实现滤镜效果》
<code class="language-html"><html> <head> <style type="text/css& ...
shell 学习笔记一
一.布尔运算符列表 a=10b=20 !非运算,表达式为 true 则返回 false,否则返回 true.[ ! false ] 返回 true. -o或运算,有一个表达式为 true 则返回 tr ...
js this小记
在JavaScript中,this 对象是在函数被调用时动态定义的. JS中有三种方法来设置this对象: someThing.someFunction(arg1, arg2, argN) someF ...

原生js操作option

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

随机推荐

热门专题