前言:下面我们接着旅程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> 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> 72 73 <input type="checkbox" id="p2" /><label for="p2">兄弟</label> 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; 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; 100%" value=">" onclick="moveSelected(document.getElementById('select1'),document.getElementById('select2'))" /> 40 41 <input type="button" style="float:left; 100%" value="<" onclick="moveSelected(document.getElementById('select2'),document.getElementById('select1'))" /> 42 43 <input type="button" style="float:left; 100%" value=">>" /> 44 45 <input type="button" style="float:left; 100%" value="<<" /> 46 47 </div> 48 49 <select style="float:left; height: 100px; 119px;" id="select2" multiple="multiple"></select>
这个系列的所有源代码下载地址是：http://download.csdn.net/detail/hanyinglong/4483109