首頁 > 開發者 > JavaScript
前言:下面我們接著旅程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; 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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
