Javascript_15_DOM_select exercise-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Javascript_15_DOM_select exercise

黄舟

Jan 18, 2017 pm 04:55 PM

Javascript_15_DOM_select exercise

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    <title>DOM_select练习</title>
    <style type="text/css">
    a:link,a:visited{
        color: blue;
        text-decoration: none;
    }
    a:hover{
        color: red;
    }
    table{
      color:white;
      font-weight: bold;
        border: #008FF0 dashed 1px;
    }
    table th{
        border: #008FF0 dashed 1px;
        background-color: grey;
    }
    table td{
        border: #008FF0 dashed 1px;
    }
      .div_class{
        height:50px;
        width:50px;
        float:left;
        margin-right:30px;
      }
      #div_id_text{
        clear:left;
        margin-top:20px;
      }
    </style>
  </head>
  <body>    
＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
    /*
     * 需求：单击按钮添加附件，删除附件
     思路：将按钮封装到行里面，变成增加行，删除行对象
     */
    <script type="text/javascript">
      function addFile_1(){
        /*
         * <!--tr>
        <td><input type="file" /> </td>
        <td><a href="javascript:void(0)">删除附件</a></td>
        </tr-->
         * 将文件选取框定义在行对象中的单元格Td
         * 删除按钮也定义在单元格Td
         * 所以只要给表格创建新的行和单元格即可。
         */
        var oTab= document.getElementById("tab_id_1");
        var oTr= oTab.insertRow();
        var oTd_file = oTr.insertCell();
        var oTd_del = oTr.insertCell();
        oTd_file.innerHTML = "<input type=&#39;file&#39; />";
        oTd_del.innerHTML  = "<a href=&#39;javascript:void(0)&#39; onclick=&#39;deleteFile(this)&#39;>删除附件</a>";
//      oTd_del.innerHTML = "<img src=&#39;1.jpg&#39; alt=&#39;删除附件&#39; onclick=&#39;deleteFile(this)&#39; />";
      }
      function deleteFile(oA){
        //a父节点是td，td的父节点才是tr
        var oTr = oA.parentNode.parentNode;
        oTr.parentNode.removeChild(oTr);
      }
    </script>  
    <table id="tab_id_1">
      <tr>
        <td><a href="javascript:void(0)" onclick="addFile_1()">添加附件</a></td>
      </tr>
      <!--tr>
        <td><input type="file" /> </td>
        <td><a href="javascript:void(0)">删除附件</a></td>
      </tr-->
    </table>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
    /*
     *需求： 实现二级联动菜单
     */
    <script type="text/javascript">
      function selectCharacter_3(){
        var arr_1=[&#39;林黛玉&#39;,&#39;史湘云&#39;,&#39;薛宝钗&#39;,&#39;妙玉&#39;];
        var arr_2=["诸葛亮","刘备","周瑜","孙权"];
        var arr_3=[&#39;林冲&#39;,&#39;鲁智深&#39;,&#39;武松&#39;,&#39;李逵&#39;];
        var arr_4=[&#39;唐僧&#39;,&#39;孙悟空&#39;,&#39;猪八戒&#39;,&#39;沙和尚&#39;];
        var collStory = {"选择名著":[&#39;选择人物&#39;]
        ,"红楼梦":arr_1
        ,"三国演义":arr_2
        ,"水浒传":arr_3
        ,"西游记":arr_4};
    //获取两个下拉菜单对象。 
        var oSelect_3 = document.getElementById("select_id_3");
        var oSelect_4 = document.getElementById("select_id_4");
        //获取到底选择的是哪部名著。
        var index = oSelect_3.selectedIndex;
        var name=oSelect_3.options[index].innerHTML;
        //将子菜单中的内容清空一下。
        oSelect_4.length = 0;//下面这种方法也可以
        /*
      for(var x=0;x<oSelect_4.options.length; ){
     oSelect_4.removeChild(oSelect_4.options[x]);
     }*/
        //通过键(名字)到容器去获取对应的人物数组。
        var arr = collStory[name];
        //遍历这个数组。并将这个数组的元素封装成option对象，添加到子菜单中
        for(var x=0; x<arr.length; x++){
          var oOption = document.createElement("option");
          oOption.innerHTML = arr[x];
          oSelect_4.appendChild(oOption);
         }
      }
      function selectCharacter_2(){
        //var arr_1=["诸葛亮","刘备","周瑜","孙权"];
        var collStory = {"选择名著":[&#39;选择人物&#39;]
        ,"红楼梦":[&#39;林黛玉&#39;,&#39;史湘云&#39;,&#39;薛宝钗&#39;,&#39;妙玉&#39;]
        ,"三国演义":["诸葛亮","刘备","周瑜","孙权"]
        ,"水浒传":[&#39;林冲&#39;,&#39;鲁智深&#39;,&#39;武松&#39;,&#39;李逵&#39;]
        ,"西游记":[&#39;唐僧&#39;,&#39;孙悟空&#39;,&#39;猪八戒&#39;,&#39;沙和尚&#39;]};
    //获取两个下拉菜单对象。 
        var oSelect_3 = document.getElementById("select_id_3");
        var oSelect_4 = document.getElementById("select_id_4");
        //获取到底选择的是哪部名著。
        var index = oSelect_3.selectedIndex;
        var name=oSelect_3.options[index].innerHTML;
        //将子菜单中的内容清空一下。
        //oSelect_4.length = 0;//下面这种方法也可以
      for(var x=0;x<oSelect_4.options.length; ){
     oSelect_4.removeChild(oSelect_4.options[x]);
     }
        //通过键(名字)到容器去获取对应的人物数组。
        var arr = collStory[name];
        //遍历这个数组。并将这个数组的元素封装成option对象，添加到子菜单中
        for(var x=0; x<arr.length; x++){
          var oOption = document.createElement("option");
          oOption.innerHTML = arr[x];
          oSelect_4.appendChild(oOption);
         }
      }
      function selectCharacter_1(){
        //var arr_1=["诸葛亮","刘备","周瑜","孙权"];
        var collStory = {"选择名著":[&#39;选择人物&#39;]
        ,"红楼梦":[&#39;林黛玉&#39;,&#39;史湘云&#39;,&#39;薛宝钗&#39;,&#39;妙玉&#39;]
        ,"三国演义":["诸葛亮","刘备","周瑜","孙权"]
        ,"水浒传":[&#39;林冲&#39;,&#39;鲁智深&#39;,&#39;武松&#39;,&#39;李逵&#39;]
        ,"西游记":[&#39;唐僧&#39;,&#39;孙悟空&#39;,&#39;猪八戒&#39;,&#39;沙和尚&#39;]};
        //alert(collStory);//返回[object Object]
      //alert(collStory["三国演义"]);//"诸葛亮","刘备","周瑜","孙权"
      //alert(collStory["三国演义"].length);//4
    //获取两个下拉菜单对象。 
        var oSelect_3 = document.getElementById("select_id_3");
        var oSelect_4 = document.getElementById("select_id_4");
        //获取到底选择的是哪部名著。
        var index = oSelect_3.selectedIndex;
        var name=oSelect_3.options[index].innerHTML;
        //alert(name);//三国演义
        //将子菜单中的内容清空一下。
        oSelect_4.length = 0;//下面这种方法也可以
        /*
      for(var x=0;x<oSelect_4.options.length; ){
     oSelect_4.removeChild(oSelect_4.options[x]);
     }*/
        //通过键(名字)到容器去获取对应的人物数组。
        var arr = collStory[name];
        //alert(arr==arr_1);//true
        //alert(arr);
        //遍历这个数组。并将这个数组的元素封装成option对象，添加到子菜单中
        for(var x=0; x<arr.length; x++){
          var oOption = document.createElement("option");
          oOption.innerHTML = arr[x];
          oSelect_4.appendChild(oOption);
         }
      }
    </script>
    <select id="select_id_3" onchange="selectCharacter_3()">
      <option>选择名著</option>
      <option>红楼梦</option>
      <option>三国演义</option>
      <option>水浒传</option>
      <option>西游记</option>
    </select>
    <select id="select_id_4">
      <option>选择人物</option>
    </select>
    <hr />
＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
    /*
     *需求： 实现二级联动菜单
     */
<script type="text/javascript">
      function selectCity(){
        var  collCities = [[&#39;选择城市&#39;]
                  ,[&#39;海淀区&#39;,&#39;朝阳区&#39;,&#39;东城区&#39;,&#39;西城区&#39;]
                  ,[&#39;济南&#39;,&#39;青岛&#39;,&#39;烟台&#39;,&#39;威海&#39;]
                  ,[&#39;沈阳&#39;,&#39;大连&#39;,&#39;鞍山&#39;,&#39;抚顺&#39;]
                  ,[&#39;石家庄&#39;,&#39;保定&#39;,&#39;邯郸&#39;,&#39;廊坊&#39;]];
        //获取两个下拉菜单对象。 
        var oSelect_1 = document.getElementById("select_id_1");
        var oSelect_2 = document.getElementById("select_id_2");
        //获取到底选择的是哪个省。
        var index = oSelect_1.selectedIndex;
        //通过角标到容器去获取对应的城市数组。
        var arrCities = collCities[index];
        //将子菜单中的内容清空一下。
        oSelect_2.length = 0;
        //遍历这个数组。并将这个数组的元素封装成option对象，添加到子菜单中
        for(var x=0; x<arrCities.length; x++){
          var oOption = document.createElement("option");
          oOption.innerHTML = arrCities[x];
          oSelect_2.appendChild(oOption);
        }
      }
    </script>
    <select id="select_id_1" onchange="selectCity()">
      <option>选择省市</option>
      <option>北京</option>
      <option>山东</option>
      <option>辽宁</option>
      <option>河北</option>
    </select>
    
    <select id="select_id_2">
      <option>选择城市</option>
    </select>    
＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
    /*
     * 需求：点击三个DIV区域，让文字分别显示相应的颜色
     */
    <script type="text/javascript">
      function changeColor_1(oDiv){
        var colorVal = oDiv.style.backgroundColor;
        document.getElementById("div_id_text").style.color = colorVal;
      }
    </script>
    <div class="div_class" id="div_id_1" style="background-color:red" onclick="changeColor_1(this)"></div>
    <div class="div_class" id="div_id_2" style="background-color:green" onclick="changeColor_1(this)"></div>
    <div class="div_class" id="div_id_3" style="background-color:blue" onclick="changeColor_1(this)"></div>
    <div id="div_id_text">
      <pre class="brush:php;toolbar:false">
1 林黛玉 可叹停机德,堪怜永絮才.玉带林中挂,金簪雪里埋. 
2 薛宝钗 可叹停机德,堪怜永絮才.玉带林中挂,金簪雪里埋. 
3 贾元春 二十年来辩是谁,榴花开处照宫闱.三春争及初春景?虎兕相逢大梦归. 
4 贾探春 才自清明志自高,生于末世运偏消.清明涕泣江边望,千里东风一梦遥. 
5 史湘云 富贵又为何?襁褓之间父母违.展眼吊斜辉,湘江水逝楚云飞. 
6 妙玉 欲洁何曾洁?云空未必空.可怜金玉质,终陷淖泥中. 
7 贾迎春 子系中山狼,得志便猖狂.金闺花柳质,一载赴黄粱. 
8 贾惜春 堪破三春景不长,缁衣顿改昔年装.可怜绣户侯门女,独卧青灯古佛旁. 
9 王熙凤 凡鸟偏从末世来,都知爱慕此生才.一从二令三人木,哭向金陵事更哀. 
10 贾巧姐 势败休云贵,家亡莫论亲.偶因济村妇,巧得遇恩人. 
11 李纨 桃李春风结子完,到头谁似一盆兰.如冰水好空相妒,枉与他人作笑谈. 
12 秦可卿 情天情海幻情深,情既相逢必主淫,漫言不肖皆出荣,造衅开端实在宁.

＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ /* * 需求：选择下拉列表框，让文字分别显示相应的颜色 select对象中的集合options：获取 select 对象中 option 对象的集合。 */ <script> function changeColor_3(){ var oSelect = document.getElementsByName("selectColor_b")[0]; //select 对象中的selectedIndex 属性， //设置或获取选中选项位于 select 对象中的位置。 var index=oSelect.selectedIndex; alert(index); var collOption = oSelect.options; var text=collOption[index].innerHTML; //alert(text); var value=collOption[index].value; alert(value); var color_1=collOption[index].style.backgroundColor; alert(color_1); document.getElementById("div_id_text").style.color = color_1; } function changeColor_2(){ var oSelect = document.getElementsByName("selectColor_a")[0]; //获取所有的option。 /*with (oSelect) { var collOption = options; alert(collOption[selectedIndex].innerHTML); }*/ var colorVal = oSelect.options[oSelect.selectedIndex].value; document.getElementById("div_id_text").style.color = colorVal; } </script>

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Python vs. JavaScript: The Learning Curve and Ease of UseApr 16, 2025 am 12:12 AM

Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.

Python vs. JavaScript: Community, Libraries, and ResourcesApr 15, 2025 am 12:16 AM

Python and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.

From C/C to JavaScript: How It All WorksApr 14, 2025 am 12:05 AM

The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.

JavaScript Engines: Comparing ImplementationsApr 13, 2025 am 12:05 AM

Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.

Beyond the Browser: JavaScript in the Real WorldApr 12, 2025 am 12:06 AM

JavaScript's applications in the real world include server-side programming, mobile application development and Internet of Things control: 1. Server-side programming is realized through Node.js, suitable for high concurrent request processing. 2. Mobile application development is carried out through ReactNative and supports cross-platform deployment. 3. Used for IoT device control through Johnny-Five library, suitable for hardware interaction.

Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)Apr 11, 2025 am 08:23 AM

I built a functional multi-tenant SaaS application (an EdTech app) with your everyday tech tool and you can do the same. First, what’s a multi-tenant SaaS application? Multi-tenant SaaS applications let you serve multiple customers from a sing

How to Build a Multi-Tenant SaaS Application with Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AM

This article demonstrates frontend integration with a backend secured by Permit, building a functional EdTech SaaS application using Next.js. The frontend fetches user permissions to control UI visibility and ensures API requests adhere to role-base

JavaScript: Exploring the Versatility of a Web LanguageApr 11, 2025 am 12:01 AM

JavaScript is the core language of modern web development and is widely used for its diversity and flexibility. 1) Front-end development: build dynamic web pages and single-page applications through DOM operations and modern frameworks (such as React, Vue.js, Angular). 2) Server-side development: Node.js uses a non-blocking I/O model to handle high concurrency and real-time applications. 3) Mobile and desktop application development: cross-platform development is realized through ReactNative and Electron to improve development efficiency.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks agoByDDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Chat Commands and How to Use Them

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Atom editor mac version download

The most popular open source editor

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.