Home > Developer > JavaScript
Next we will go on journey 9 to continue our JavaScript Dom journey 10. This blog is my final version. It took nearly two months to finish writing this system. Here I am glad that I can keep writing it down, at the same time, I also learned not to let the technical point, but people will always forget it, so I will take a very serious look at these blog series in the future, at the same time, I would like to thank the bloggers who have read my blog. Although there are not many people, I am still very happy. Below is the final version, so I have implemented several small examples.
(1) interface for selecting provinces and cities
1 <script type = "text/javascript"> 2 3 var data = {"Gansu": ["Lanzhou City", "Pingliang city", "Changzhi City"], "Shandong ": ["Jinan City", "Qingdao City", "Weifang city"], "Liaoning": ["Shenyang City", "Anshan City", "Dalian City"]}; 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 // first clear the Old city list 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") {// if you select a province, NO content is displayed. Special processing 42 43 return; 44 45} 46 47 var cities = data [proName]; // extracted content ["Lanzhou City", "Pingliang city", "Zhangye City"] 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 "> select the province </option> 68 69 </select> & nbsp; 70 71 <select id = "city"> </select> 72 73 </body>
(2) select all the songs in the list (checkbox + label), select none at all, and select inverse, only for data in one layer
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") // It is expected that if you do not select "checked", but the debugging finds that the 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"> Zeng Jing's most beautiful </label> & nbsp; & nbsp; 72 73 <input type = "checkbox" id = "p2"/> <label for = "p2"> brother </label> & nbsp; 74 75 <input type = "checkbox" id = "p3"/> <label for = "p3"> swordsman </label> 76 77 <p> 78 79 <input type = ""button" value = "select all" onclick = "selAll () "/> 80 81 <input type =" button "value =" NONE "onclick =" deselAll () "/> 82 83 <input type =" button "value =" invert "onclick =" reverSelALL () "/> 84 85 </p> 86 87 </div>
(3) Permission selection page, select, recall, select all, and withdraw all. For the code, refer to "Implementation of province/city selection interface". Because multiple Selections may make the selection items different from those selected by single choice.
1 <script type = "text/javascript"> 2 3 function moveSelected (selectSrc, selectDest) {// selectSrc is the source select, selectDest is the target select 4 5 // for (var I = 0; I <selectSrc. childNodes. length; I ++) // note the order of deletion 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> Add </option> 26 27 <option> Delete </option> 28 29 <option> modify </ option> 30 31 <option> query </option> 32 33 <option> Print </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>
All source code for this series is: 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
