JS: JQ: ...
JS:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta charset="utf-8"> 6 </head> 7 <body> 8 <select> 9 <option>---請選擇省---</option> 10 </select> 11 <select> 12 <option>---請選擇市---</option> 13 </select> 14 <select> 15 <option>請選擇縣</option> 16 </select> 17 18 <script type="text/javascript"> 19 var proArr = ["安徽","河南","河北","江蘇"]; 20 var cityArr = [ 21 ["合肥","蚌埠","亳州","阜陽"], 22 ["鄭州","開封","商丘","焦作"], 23 ["石家莊","邯鄲","衡水"], 24 ["蘇州","杭州","無錫","南京"] 25 ] 26 var couArr = [ 27 [ 28 ["合縣1","合縣2","合縣3","合縣4"], 29 ["蚌縣1","蚌縣2","蚌縣3","蚌縣4"], 30 ["亳縣1","亳縣2","亳縣3","亳縣4"], 31 ["阜縣1","阜縣2","阜縣3","阜縣4"], 32 ], 33 [ 34 ["鄭縣1","鄭縣2","鄭縣3","鄭縣4"], 35 ["開縣1","開縣2","開縣3","開縣4"], 36 ["商縣1","商縣2","商縣3","商縣4"], 37 ["焦縣1","焦縣2","焦縣3","焦縣4"], 38 ], 39 [ 40 ["石縣1","石縣2","石縣3","石縣4"], 41 ["邯縣1","邯縣2","邯縣3","邯縣4"], 42 ["衡縣1","衡縣2","衡縣3","衡縣4"], 43 ], 44 [ 45 ["蘇縣1","蘇縣2","蘇縣3","蘇縣4"], 46 ["杭縣1","杭縣2","杭縣3","杭縣4"], 47 ["無縣1","無縣2","無縣3","無縣4"], 48 ["南縣1","南縣2","南縣3","南縣4"], 49 ], 50 ] 51 var sltNope = document.getElementsByTagName("select"); 52 var Index1 = 0; 53 createNope(proArr,0); 54 sltNope[0].onchange = function(){ 55 sltNope[1].length = 1; 56 sltNope[2].length = 1; 57 Index = this.selectedIndex-1; 58 createNope(cityArr[Index],1); 59 } 60 sltNope[1].onchange = function(){ 61 sltNope[2].length = 1; 62 createNope(couArr[Index][this.selectedIndex-1],2); 63 } 64 function createNope(Arr,sum){ 65 for (x = 0;x<Arr.length;x++) { 66 var topy = document.createElement('option'); 67 topy.innerHTML = Arr[x]; 68 sltNope[sum].appendChild(topy); 69 } 70 } 71 </script> 72 </body> 73 </html>
JQ:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta charset="utf-8"> 6 <script type="text/javascript" src="jquery-3.1.1.js"></script> 7 </head> 8 <body> 9 <select> 10 <option>---請選擇省---</option> 11 </select> 12 <select> 13 <option>---請選擇市---</option> 14 </select> 15 <select> 16 <option>請選擇縣</option> 17 </select> 18 19 <script type="text/javascript"> 20 var proArr = ["安徽","河南","河北","江蘇"]; 21 var cityArr = [ 22 ["合肥","蚌埠","亳州","阜陽"], 23 ["鄭州","開封","商丘","焦作"], 24 ["石家莊","邯鄲","衡水"], 25 ["蘇州","杭州","無錫","南京"] 26 ] 27 var couArr = [ 28 [ 29 ["合縣1","合縣2","合縣3","合縣4"], 30 ["蚌縣1","蚌縣2","蚌縣3","蚌縣4"], 31 ["亳縣1","亳縣2","亳縣3","亳縣4"], 32 ["阜縣1","阜縣2","阜縣3","阜縣4"], 33 ], 34 [ 35 ["鄭縣1","鄭縣2","鄭縣3","鄭縣4"], 36 ["開縣1","開縣2","開縣3","開縣4"], 37 ["商縣1","商縣2","商縣3","商縣4"], 38 ["焦縣1","焦縣2","焦縣3","焦縣4"], 39 ], 40 [ 41 ["石縣1","石縣2","石縣3","石縣4"], 42 ["邯縣1","邯縣2","邯縣3","邯縣4"], 43 ["衡縣1","衡縣2","衡縣3","衡縣4"], 44 ], 45 [ 46 ["蘇縣1","蘇縣2","蘇縣3","蘇縣4"], 47 ["杭縣1","杭縣2","杭縣3","杭縣4"], 48 ["無縣1","無縣2","無縣3","無縣4"], 49 ["南縣1","南縣2","南縣3","南縣4"], 50 ], 51 ] 52 createNope(proArr,0); 53 $("
