首页 > 代码库 > Dom中select练习
Dom中select练习
选择框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 = http://www.mamicode.com/{"山东": ["济南", "德州", "潍坊"], "河南": ["郑州", "洛阳", "三门峡"], "辽宁": ["沈阳", "鞍山", "大连"] }; 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 =http://www.mamicode.com/ 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 =http://www.mamicode.com/="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 =http://www.mamicode.com/ 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" onl oad="loadProv()">103 <select id="prov" onchange="ResponsetoCity()"><option>请选择省</option></select>104 <select id="city"style="width: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="http://www.mamicode.com/全选" onclick="SelectAll()" />123 <input type="button" value="http://www.mamicode.com/全不选" onclick="NoSelectAll()" />124 <input type="button" value="http://www.mamicode.com/反选" onclick="ReverseSelect()" />125 </div>126 <div style="position:absolute;left:30%;width:30%;">127 <select id="sel1" multiple="multiple" size="10" style="float:left;width:30%;">128 <option value="http://www.mamicode.com/add">添加</option>129 <option value="http://www.mamicode.com/print">打印</option>130 <option value="http://www.mamicode.com/delete">删除</option>131 <option value="http://www.mamicode.com/modify">修改</option>132 <option value="http://www.mamicode.com/look">查询</option>133 <option value="http://www.mamicode.com/cli">点击</option>134 <option value="http://www.mamicode.com/chag">改变</option>135 <option value="http://www.mamicode.com/away">抹去</option>136 <option value="http://www.mamicode.com/kill">杀死</option>137 <option value="http://www.mamicode.com/evt">肇事</option>138 </select>139 <div style="float:left">140 <input type="button" value="http://www.mamicode.com/>>" onclick="ToAll()" style="float:left;width:100%" />141 <input type="button" value="http://www.mamicode.com/<<" onclick="FromAll()" style="float:left;width:100%" />142 <input type="button" value="http://www.mamicode.com/>" onclick="MoveFromTo()" style="float:left;width:100%" />143 <input type="button" value="http://www.mamicode.com/<" onclick="MoveToFrom()" style="float:left;width:100%" />144 145 </div>146 <select id="sel2" multiple="multiple" size="10" style="float:left;width: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>
Dom中select练习
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。