我是一个菜鸟，我只是在努力，2021正视自己，面对2021！

记录我的旅程10之JavaScript Dom学习笔记

前言:下面我们接着旅程9继续我们的JavaScript Dom征程10。这篇博客是我的完结版，花费了将近两个月的时间终于写完了这个系统，在这里我很高兴我能够坚持写下来，同时也让我学到了不让技术点，但是人总是会淡忘的吗，所以我以后还要非常认真的仔细看看这些博客系列，同时也感谢阅读我的博客的博友，人虽然不多，但是我还是很高兴的。下面是最后完结版所以我实现了几个小例子

(1) 实现省市选择的界面

 1     <script type="text/javascript">
 2 
 3         var data = { "甘肃": ["兰州市", "平凉市", "张掖市"], "山东": ["济南市", "青岛市", "潍坊市"], "辽宁": ["沈阳市", "鞍山市", "大连市"] };
 4 
 5         function loadRrov() {
 6 
 7             var prov = document.getElementById("prov");
 8 
 9             for (var key in data) {
10 
11                 var option = document.createElement("option");
12 
13                 option.value = key;
14 
15                 option.innerText = key;
16 
17                 prov.appendChild(option);
18 
19             }     }
20 
21         function provChange() {
22 
23             var prov = document.getElementById("prov");
24 
25             var city = document.getElementById("city");
26 
27             //先清除旧的城市列表
28 
29             city.options.length = 0;
30 
31             for (var i = 0; i < city.childNodes.length; i++) {
32 
33                 var option = city.childNodes[i];
34 
35                 city.removeChild(option);
36 
37             }
38 
39             var proName = prov.value;
40 
41             if (proName == "none") {  //如果选择的是请选择省，则不显示内容，特殊处理
42 
43                 return;
44 
45             }
46 
47             var cities = data[proName]; //取出的内容["兰州市", "平凉市", "张掖市"]
48 
49             for (var i = 0; i < cities.length; i++) {
50 
51                 var option = document.createElement("option");
52 
53                 option.value = cities[i];
54 
55                 option.innerText = cities[i];
56 
57                 city.appendChild(option);
58 
59             }    }
60 
61     </script>
62 
63 <body onload="loadRrov()">
64 
65     <select id="prov" onchange="provChange()">
66 
67         <option  value="none">请选择省</option>
68 
69     </select>&nbsp;&nbsp;
70 
71     <select id="city"></select>
72 
73 </body>

 

(2) 歌曲列表(checkbox+label)全选，全不选，反选，只针对一个层中的数据

   

 1  <script type="text/javascript">
 2 
 3         function selAll() {
 4 
 5             var playlist = document.getElementById("playlist");
 6 
 7             var inputs = playlist.getElementsByTagName("input");
 8 
 9             for (var i = 0; i < inputs.length; i++) {
10 
11                 var input = inputs[i];
12 
13                 if (input.type == "checkbox") {
14 
15                     input.checked = "checked";
16 
17                 }
18 
19             }   }
20 
21         function deselAll() {
22 
23             var playlist = document.getElementById("playlist");
24 
25             var inputs = playlist.getElementsByTagName("input");
26 
27             for (var i = 0; i < inputs.length; i++) {
28 
29                 var input = inputs[i];
30 
31                 if (input.type == "checkbox") {
32 
33                     input.checked = "";
34 
35                 }
36 
37             }  }
38 
39         function reverSelALL() {
40 
41             var playlist = document.getElementById("playlist");
42 
43             var inputs = playlist.getElementsByTagName("input");
44 
45             for (var i = 0; i < inputs.length; i++) {
46 
47                 var input = inputs[i];
48 
49                 if (input.type == "checkbox") {
50 
51                     //if(input.type=="checked") //期望的是如果别选中则"checked",但是调试发现不是这样的
52 
53                     if (input.type == true) {
54 
55                         //input.type='';
56 
57                         input.checked = false;
58 
59                     }
60 
61                     else {
62 
63                         input.checked = true;
64 
65                     }     }    }  }
66 
67     </script>
68 
69     <div id="playlist">
70 
71         <input type="checkbox" id="p1" /><label for="p1">曾静最美</label>&nbsp;&nbsp;
72 
73         <input type="checkbox" id="p2" /><label for="p2">兄弟</label>&nbsp;&nbsp;
74 
75         <input type="checkbox" id="p3" /><label for="p3">笑傲江湖</label>
76 
77         <p>
78 
79             <input type="button" value="全选" onclick="selAll()" />
80 
81             <input type="button" value="全不选" onclick="deselAll()" />
82 
83             <input type="button" value="反选" onclick="reverSelALL()" />
84 
85         </p>
86 
87     </div>

 

 (3) 权限选择页面，选择，撤回，全部选择，全部撤回，代码参考”实现省市选择界面”，因为可能多选，判断选择项和单选的会有不同

 

 1   <script type="text/javascript">
 2 
 3         function moveSelected(selectSrc, selectDest) {  //selectSrc是源select,selectDest是目标select
 4 
 5             //for(var i=0;i<selectSrc.childNodes.length;i++) //注意删除的顺序
 6 
 7             for (var i = selectSrc.childNodes.length - 1; i >= 0; i--) {
 8 
 9                 var option = selectSrc.childNodes[i];
10 
11                 if (option.selected == true) {
12 
13                     selectSrc.removeChild(option);
14 
15                     option.selected = false;
16 
17                     selectDest.appendChild(option);
18 
19                 }   }   }
20 
21     </script>
22 
23     <select style="float:left; width:15%; height:100px;" id="select1" multiple="multiple">
24 
25         <option>添加</option>
26 
27         <option>删除</option>
28 
29         <option>修改</option>
30 
31         <option>查询</option>
32 
33         <option>打印</option>
34 
35     </select>
36 
37     <div style="float:left; width="15%">
38 
39         <input type="button" style="float:left; width:100%" value=">" onclick="moveSelected(document.getElementById('select1'),document.getElementById('select2'))" />
40 
41         <input type="button" style="float:left; width:100%" value="<" onclick="moveSelected(document.getElementById('select2'),document.getElementById('select1'))" />
42 
43         <input type="button" style="float:left; width:100%" value=">>" />
44 
45         <input type="button" style="float:left; width:100%" value="<<" />
46 
47     </div>
48 
49     <select style="float:left; height: 100px; width: 119px;" id="select2"  multiple="multiple"></select>

 

 

这个系列的所有源代码下载地址是：http://download.csdn.net/detail/hanyinglong/4483109

posted @ 2012-08-07 20:35  Kencery  阅读(626)  评论(0)  编辑  收藏  举报
友情链接：初心商城