js之select標簽---省市聯動小例子
阿新 • • 發佈：2018-07-28
asc name attr == ima 選擇 jos chan ava
select標簽
運用json和二維數組來實現選擇標簽的省市聯動選擇，看圖
當沒有選擇省的時候
只能看到省，沒有選擇省的時候，城市是沒有的
當點擊一個省後，再點擊城市就會有該省的城市
代碼兩種方法實現
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload=function(){ var oS1=document.getElementsByTagName(‘select‘); //josin做法 /* var josn={ ‘遼寧‘:[‘沈陽‘,‘大連‘,‘錦州‘,‘鐵嶺‘], ‘貴州‘:[‘貴陽‘,‘遵義‘,‘同仁‘,‘仁懷‘], ‘四川‘:[‘成都‘,‘達州‘,‘廣漢‘,‘玉樹‘], ‘湖北‘:[‘武漢‘,‘襄陽‘,‘宜昌‘,‘黃石‘] } for(attr in josn){ oS1[0].innerHTML+=‘<option value="‘+attr+‘">‘+attr+‘</option>‘; } oS1[0].onchange=function(){ oS1[1].innerHTML=‘<option>城市</option>‘; for(attr in josn){ if(oS1[0].value==attr){ for(var i=0;i<josn[attr].length;i++) oS1[1].innerHTML+=‘<option value="‘+josn[attr][i]+‘">‘+josn[attr][i]+‘</option>‘; } } }*/ /*-------二維數組做法----*/ var pro=[‘遼寧‘,‘貴州‘,‘四川‘,‘湖北‘]; var city=[[‘沈陽‘,‘大連‘,‘錦州‘,‘鐵嶺‘], [‘貴陽‘,‘遵義‘,‘同仁‘,‘仁懷‘], [‘成都‘,‘達州‘,‘廣漢‘,‘玉樹‘], [‘武漢‘,‘襄陽‘,‘宜昌‘,‘黃石‘]]; for(var i=0;i<pro.length;i++){ oS1[0].innerHTML+=‘<option value="‘+pro[i]+‘">‘+pro[i]+‘</option>‘; } oS1[0].onclick=function(){ oS1[1].innerHTML=‘<option>城市</option>‘; //每點擊一次就清一次內容 for(var i=0;i<city.length;i++){ if(oS1[0].value==pro[i]){ for(var j=0;j<city[i].length;j++){ oS1[1].innerHTML+=‘<option value="‘+city[i][j]+‘">‘+city[i][j]+‘</option>‘; } } } } } </script> </head> <body> <select name=""> <option value="">省份</option> </select> <select > <option>城市</option> </select> </body> </html>
js之select標簽---省市聯動小例子