標籤：script change 數組 -- val value char cti name
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標籤---省市聯動小例子
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
