Maison interface Web js tutoriel Exercice Javascript_15_DOM_select

Exercice Javascript_15_DOM_select

Jan 18, 2017 pm 04:55 PM

Javascript_15_DOM_select exercice

<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 对象的集合。 */
Copier après la connexion

Ce qui précède est le contenu de l'exercice Javascript_15_DOM_select Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www. .php.cn) !


Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Commandes de chat et comment les utiliser
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript Dec 17, 2023 pm 02:54 PM

Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de reconnaissance vocale en ligne Introduction : Avec le développement continu de la technologie, la technologie de reconnaissance vocale est devenue une partie importante du domaine de l'intelligence artificielle. Le système de reconnaissance vocale en ligne basé sur WebSocket et JavaScript présente les caractéristiques d'une faible latence, d'un temps réel et d'une multiplateforme, et est devenu une solution largement utilisée. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de reconnaissance vocale en ligne.

WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel Dec 17, 2023 pm 05:30 PM

WebSocket et JavaScript : technologies clés pour réaliser des systèmes de surveillance en temps réel Introduction : Avec le développement rapide de la technologie Internet, les systèmes de surveillance en temps réel ont été largement utilisés dans divers domaines. L'une des technologies clés pour réaliser une surveillance en temps réel est la combinaison de WebSocket et de JavaScript. Cet article présentera l'application de WebSocket et JavaScript dans les systèmes de surveillance en temps réel, donnera des exemples de code et expliquera leurs principes de mise en œuvre en détail. 1. Technologie WebSocket

Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel Dec 17, 2023 pm 12:09 PM

Introduction à l'utilisation de JavaScript et de WebSocket pour mettre en œuvre un système de commande en ligne en temps réel : avec la popularité d'Internet et les progrès de la technologie, de plus en plus de restaurants ont commencé à proposer des services de commande en ligne. Afin de mettre en œuvre un système de commande en ligne en temps réel, nous pouvons utiliser les technologies JavaScript et WebSocket. WebSocket est un protocole de communication full-duplex basé sur le protocole TCP, qui peut réaliser une communication bidirectionnelle en temps réel entre le client et le serveur. Dans le système de commande en ligne en temps réel, lorsque l'utilisateur sélectionne des plats et passe une commande

Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript Dec 17, 2023 am 09:39 AM

Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de réservation en ligne. À l'ère numérique d'aujourd'hui, de plus en plus d'entreprises et de services doivent fournir des fonctions de réservation en ligne. Il est crucial de mettre en place un système de réservation en ligne efficace et en temps réel. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de réservation en ligne et fournit des exemples de code spécifiques. 1. Qu'est-ce que WebSocket ? WebSocket est une méthode full-duplex sur une seule connexion TCP.

JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel Dec 17, 2023 pm 05:13 PM

JavaScript et WebSocket : Construire un système efficace de prévisions météorologiques en temps réel Introduction : Aujourd'hui, la précision des prévisions météorologiques revêt une grande importance pour la vie quotidienne et la prise de décision. À mesure que la technologie évolue, nous pouvons fournir des prévisions météorologiques plus précises et plus fiables en obtenant des données météorologiques en temps réel. Dans cet article, nous apprendrons comment utiliser la technologie JavaScript et WebSocket pour créer un système efficace de prévisions météorologiques en temps réel. Cet article démontrera le processus de mise en œuvre à travers des exemples de code spécifiques. Nous

Comment utiliser insertBefore en javascript Comment utiliser insertBefore en javascript Nov 24, 2023 am 11:56 AM

Utilisation : En JavaScript, la méthode insertBefore() est utilisée pour insérer un nouveau nœud dans l'arborescence DOM. Cette méthode nécessite deux paramètres : le nouveau nœud à insérer et le nœud de référence (c'est-à-dire le nœud où le nouveau nœud sera inséré).

Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Jan 05, 2024 pm 06:08 PM

Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest

JavaScript et WebSocket : créer un système de traitement d'images en temps réel efficace JavaScript et WebSocket : créer un système de traitement d'images en temps réel efficace Dec 17, 2023 am 08:41 AM

JavaScript est un langage de programmation largement utilisé dans le développement Web, tandis que WebSocket est un protocole réseau utilisé pour la communication en temps réel. En combinant les puissantes fonctions des deux, nous pouvons créer un système efficace de traitement d’images en temps réel. Cet article présentera comment implémenter ce système à l'aide de JavaScript et WebSocket, et fournira des exemples de code spécifiques. Tout d’abord, nous devons clarifier les exigences et les objectifs du système de traitement d’images en temps réel. Supposons que nous disposions d'un appareil photo capable de collecter des données d'image en temps réel.

See all articles