选择框checkbox练习
select练习
注意select的selected属性
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>正则表达式</title> 5 <script type="text/javascript"> 6 function numkeydown() { 7 var k = window.event.keyCode; 8 if((k==9)||(k==13)||(k==46)||(k==8)||(k==189)||(k==109) 9 ||(k==190)||(k>=48&&k<=57)||(k>=96&&k<=105)||(k>=37&&k<=40)) 10 { return true; } 11 else { 12 return false; 13 } 14 } 15 function judge(k) 16 { 17 if ((k == 9) || (k == 13) || (k == 46) || (k == 8) || (k == 189) || (k == 109) 18 || (k == 190) || (k >= 48 && k <= 57) || (k >= 96 && k <= 105) || (k >= 37 && k <= 40)) 19 { return true; } 20 else { 21 return false; 22 } 23 } 24 function ONpasteDeal() 25 { 26 var text = window.clipboardData.getData("Text"); 27 for(var i=0;i<text.length;i++) 28 { 29 var k = text.charCodeAt(i); 30 if (!judge(k)) 31 return false; 32 } 33 return true; 34 } 35 //onkeydown="if(window.event.keyCode == 13) { window.event.keyCode = 9;} 36 var data = { "山东": ["济南", "德州", "潍坊"], "河南": ["郑州", "洛阳", "三门峡"], "辽宁": ["沈阳", "鞍山", "大连"] }; 37 function loadProv() 38 { 39 var prov = document.getElementById("prov"); 40 for(var key in data) 41 { 42 var option = document.createElement("option"); 43 option.value = key; 44 option.innerText = key; 45 prov.appendChild(option); 46 47 } 48 //ResponsetoCity(); 49 } 50 function ResponsetoCity() 51 { 52 var prov = document.getElementById("prov"); 53 54 var city = document.getElementById("city"); 55 //city.options.length = 0; 56 if (prov.value == "none") 57 return; 58 for (var i =city.childNodes.length-1; i >= 0; i--) 59 { 60 city.removeChild(city.childNodes[i]); 61 } 62 var key = prov.value; 63 64 for (var i in data[key]) 65 { 66 var option=document.createElement("option"); 67 option.innerText = data[key][i]; 68 option.value = data[key][i]; 69 city.appendChild(option); 70 } 71 } 72 function SelectAll() 73 { 74 var playlist = document.getElementById("selectdiv"); 75 var input = playlist.getElementsByTagName("input"); 76 for(var i=0;i<input.length;i++) 77 if (input[i].type == "checkbox") { 78 input[i].checked = "checked"; 79 } 80 } 81 function NoSelectAll() { 82 var playlist = document.getElementById("selectdiv"); 83 var input = playlist.getElementsByTagName("input"); 84 for (var i = 0; i < input.length; i++) 85 if (input[i].type == "checkbox") { 86 input[i].checked = ""; 87 } 88 } 89 function ReverseSelect() { 90 var playlist = document.getElementById("selectdiv"); 91 var input = playlist.getElementsByTagName("input"); 92 for (var i = 0; i < input.length; i++) 93 if (input[i].type == "checkbox") { 94 if (input[i].checked == true) 95 input[i].checked = ""; 96 else input[i].checked = "checked"; 97 } 98 } 99 </script> 100 101 </head> 102 <body bgcolor="blue" onload="loadProv()"> 103 <select id="prov" onchange="ResponsetoCity()"><option>请选择省</option></select> 104 <select id="city"style="80px"></select><br/> 105 <input type="text"><input type="text"onpaste="return ONpasteDeal();"style="ime-mode:disabled;" onkeydown="return numkeydown();"/><br/> 106 <input type="text"><input type="text"style="text-align:right;ime-mode:disabled"> 107 <br/><br/><br/><br/> 108 <div id="selectdiv" style="position:absolute;"> 109 <input type="checkbox" id="p1" /><label for="p1">天蝎座</label><br /> 110 <input type="checkbox" id="p2" /><label for="p2">水瓶座</label><br /> 111 <input type="checkbox" id="p3" /><label for="p3">巨蟹座</label><br /> 112 <input type="checkbox" id="p4" /><label for="p4">摩羯座</label><br /> 113 <input type="checkbox" id="p5" /><label for="p5">双子座</label><br /> 114 <input type="checkbox" id="p6" /><label for="p6">金牛座</label><br /> 115 <input type="checkbox" id="p7" /><label for="p7">处女座</label><br /> 116 <input type="checkbox" id="p8" /><label for="p8">白羊座</label><br /> 117 <input type="checkbox" id="p9" /><label for="p9">射手座</label><br /> 118 <input type="checkbox" id="p10" /><label for="p10">双鱼座</label><br /> 119 <input type="checkbox" id="p11" /><label for="p11">天秤座</label><br /> 120 <input type="checkbox" id="p12" /><label for="p12">狮子座</label><br /> 121 122 <input type="button" value="全选" onclick="SelectAll()" /> 123 <input type="button" value="全不选" onclick="NoSelectAll()" /> 124 <input type="button" value="反选" onclick="ReverseSelect()" /> 125 </div> 126 <div style="position:absolute;left:30%;30%;"> 127 <select id="sel1" multiple="multiple" size="10" style="float:left;30%;"> 128 <option value="add">添加</option> 129 <option value="print">打印</option> 130 <option value="delete">删除</option> 131 <option value="modify">修改</option> 132 <option value="look">查询</option> 133 <option value="cli">点击</option> 134 <option value="chag">改变</option> 135 <option value="away">抹去</option> 136 <option value="kill">杀死</option> 137 <option value="evt">肇事</option> 138 </select> 139 <div style="float:left"> 140 <input type="button" value=">>" onclick="ToAll()" style="float:left;100%" /> 141 <input type="button" value="<<" onclick="FromAll()" style="float:left;100%" /> 142 <input type="button" value=" > " onclick="MoveFromTo()" style="float:left;100%" /> 143 <input type="button" value=" < " onclick="MoveToFrom()" style="float:left;100%" /> 144 145 </div> 146 <select id="sel2" multiple="multiple" size="10" style="float:left;30%;"></select> 147 </div> 148 <script type="text/javascript"> 149 function MoveFromTo() 150 { 151 var sel = document.getElementById("sel1"); 152 var sel2 = document.getElementById("sel2"); 153 for (var i = 0; i < sel.childNodes.length; i++) 154 { 155 if(sel.childNodes[i].selected==true) 156 { 157 var option = sel.childNodes[i]; 158 option.selected = false; 159 sel2.appendChild(option); 160 i--; 161 } 162 } 163 } 164 function MoveToFrom() 165 { 166 var sel = document.getElementById("sel1"); 167 var sel2 = document.getElementById("sel2"); 168 for (var i = 0; i < sel2.childNodes.length; i++) { 169 if (sel2.childNodes[i].selected==true) { 170 var option = sel2.childNodes[i]; 171 option.selected = false; 172 sel.appendChild(option); 173 i--; 174 } 175 } 176 } 177 var ToAll = function () { 178 var sel = document.getElementById("sel1"); 179 var sel3 = document.getElementById("sel2"); 180 181 for (; sel.childNodes.length > 0;) 182 { 183 var option = sel.childNodes[0]; 184 option.selected = false; 185 sel3.appendChild(option); 186 187 } 188 } 189 var FromAll = function () { 190 var sel = document.getElementById("sel1"); 191 var sel3 = document.getElementById("sel2"); 192 193 for (; sel3.childNodes.length>0;) { 194 var option = sel3.childNodes[0]; 195 option.selected = false; 196 sel1.appendChild(option); 197 198 } 199 } 200 </script> 201 </body> 202 </html>