Javascript_15_DOM_select-Übung-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Javascript_15_DOM_select-Übung

黄舟

Jan 18, 2017 pm 04:55 PM

Javascript_15_DOM_select-Übung

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

<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 对象的集合。 */

Nach dem Login kopieren

Das Obige ist der Inhalt der Javascript_15_DOM_select-Übung. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.org). .php.cn)!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Assassin's Creed Shadows: Seashell Riddle -Lösung

1 Monate vor By DDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

3 Wochen vor By DDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

1 Monate vor By DDD

Wie kann ich KB5055523 in Windows 11 nicht installieren?

2 Wochen vor By DDD

Inzoi: Wie man sich für Schule und Universität bewerbt

3 Wochen vor By DDD

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7793

Java-Tutorial

1644

CakePHP-Tutorial

1401

Laravel-Tutorial

1299

PHP-Tutorial

1234

Related knowledge

So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript Dec 17, 2023 pm 02:54 PM

So implementieren Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem. Einführung: Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Spracherkennungstechnologie zu einem wichtigen Bestandteil des Bereichs der künstlichen Intelligenz geworden. Das auf WebSocket und JavaScript basierende Online-Spracherkennungssystem zeichnet sich durch geringe Latenz, Echtzeit und plattformübergreifende Eigenschaften aus und hat sich zu einer weit verbreiteten Lösung entwickelt. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem implementieren.

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen Dec 17, 2023 pm 05:30 PM

WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie

Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems Dec 17, 2023 pm 12:09 PM

Einführung in die Verwendung von JavaScript und WebSocket zur Implementierung eines Online-Bestellsystems in Echtzeit: Mit der Popularität des Internets und dem Fortschritt der Technologie haben immer mehr Restaurants damit begonnen, Online-Bestelldienste anzubieten. Um ein Echtzeit-Online-Bestellsystem zu implementieren, können wir JavaScript und WebSocket-Technologie verwenden. WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert und eine bidirektionale Kommunikation zwischen Client und Server in Echtzeit realisieren kann. Im Echtzeit-Online-Bestellsystem, wenn der Benutzer Gerichte auswählt und eine Bestellung aufgibt

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript Dec 17, 2023 am 09:39 AM

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript. Im heutigen digitalen Zeitalter müssen immer mehr Unternehmen und Dienste Online-Reservierungsfunktionen bereitstellen. Es ist von entscheidender Bedeutung, ein effizientes Online-Reservierungssystem in Echtzeit zu implementieren. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Reservierungssystem implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist eine Vollduplex-Methode für eine einzelne TCP-Verbindung.

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Dec 17, 2023 pm 05:13 PM

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das tägliche Leben und die Entscheidungsfindung von großer Bedeutung. Mit der Weiterentwicklung der Technologie können wir genauere und zuverlässigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Jan 05, 2024 pm 06:08 PM

JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest

So verwenden Sie insertBefore in Javascript Nov 24, 2023 am 11:56 AM

Verwendung: In JavaScript wird die Methode insertBefore() verwendet, um einen neuen Knoten in den DOM-Baum einzufügen. Diese Methode erfordert zwei Parameter: den neuen Knoten, der eingefügt werden soll, und den Referenzknoten (d. h. den Knoten, an dem der neue Knoten eingefügt wird).

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Bildverarbeitungssystems Dec 17, 2023 am 08:41 AM

JavaScript ist eine in der Webentwicklung weit verbreitete Programmiersprache, während WebSocket ein Netzwerkprotokoll für die Echtzeitkommunikation ist. Durch die Kombination der leistungsstarken Funktionen beider können wir ein effizientes Echtzeit-Bildverarbeitungssystem erstellen. In diesem Artikel wird erläutert, wie dieses System mithilfe von JavaScript und WebSocket implementiert wird, und es werden spezifische Codebeispiele bereitgestellt. Zunächst müssen wir die Anforderungen und Ziele des Echtzeit-Bildverarbeitungssystems klären. Angenommen, wir haben ein Kameragerät, das Bilddaten in Echtzeit sammeln kann

See all articles