想要實現省市區的三級聯動，首先需要的是一個下拉框，這個下拉框用我們的<select>標簽就能實現，具體如下：
<select id="province" onchange="chooseProvince(this)">
<option value="1">請選擇省</option>
</select>
<select id="city" onchange="choosecity(this)">
<option value="1">請選擇市</option>
</select>
<select id="area">
<option value="1">請選擇區</option>
</select>
此處的onchange是一個觸發事件，用來連接js腳本語言實現的內容。最基礎的下拉框出來之后，需要准備的便是一個全國省市區的數據。這種數據網絡上一般都有具體存在形式類似如下
var data=[{name:'北京',cityList:['','',''...'']},{name:'湖北',cityList:[{name:'武漢',areaList:['','','',...'']},{},{},{}...{}]},{},{}...{}];
下拉框中的數據，使用輸入法輸入是個不理智的想法，所以此處體現了循環遍歷的重要性，循環的長度是所有數據集合的長度，將遍歷出來的所有省，直轄市，行政區放入到一個集合中。單獨獲取data中第一組name的方法是 data.name即可。在遍歷的過程中增加新的省份便實現了第一個下拉框的數據。
這里得到的省集合是為了與市聯動而准備的，也就是第二個下拉框的內容。第二個下拉框的內容受到第一個的選擇的影響，首先要判斷出第一個選擇的是哪個省，這里用
var index = th.selectedIndex-1;
var provinceName = provinceArray[index];
獲取市的name首先要確定其所在的cityList，而獲取cityList則需要其對應的省（第一個下拉框的選擇，即上面的provinceName），正因為如此，遍歷省的集合，當provinceName相等於其中一個時，以此作為判斷條件，獲取此時的cityList，cityName集合中的name便是所需要的市，具體方法類似於獲取省的方法，繼而獲得了city的name。在這里需要注意的是，當選擇省的時候，之前的市的內容必須清空，否則增加所需要的對應的市的時候會在原有的基礎上進行。這里清空的方法有很多，我喜歡使用的是在遍歷添加市之前，增加一個對象.innerHTML="";
第三個下拉框內容的增加方法等同於第二個，需要它的前一級信息的集合，即市的集合。判斷出選擇的市，方法同上，然后以，遍歷過程中市的內容相等於選擇的市內容相等作為條件，得到areaList，區的集合，這里增加區的時候同樣需要把之前的增加內容清空。
區的單純增加的詳細代碼如下，前提是准確獲取對應的區的集合：
for(var a=0;a<areaList.length;a++){
var area = areaList[a];
areaTag.add(new Option(area,a));
總結：總的來說，每一個下拉框內容的添加都是建立在獲取對應集合的基礎之上。獲取集合的條件即如上所述，其中需要注意局部變量與全局變量的使用范圍。
js主要內容如下
function chooseProvince(th){
var index = th.selectedIndex-1;
var provinceName = provinceArray[index];
for(var n=0; n<provinceList.length; n++){
var provice = provinceList[n];
console.log(provice.name == provinceName);
if (provice.name == provinceName){
cityList = provice.cityList;
cityTag.innerHTML="";
console.log(cityList);
for(var c=0; c<cityList.length; c++){
var city = cityList[c];
var cityName = city.name;
cityArray[c]=cityName;
cityTag.add(new Option(cityName,c));
}
}
}
}
function choosecity(tr){
var index = tr.selectedIndex;
var cityName = cityArray[index];
for(var m=0;m<cityList.length;m++){
var city1=cityList[m];
if(cityName == city1.name){
var areaList= city1.areaList
areaTag.innerHTML="";
for(var a=0;a<areaList.length;a++){
var area = areaList[a];
areaTag.add(new Option(area,a));
}
}
}
}
以上純屬個人觀點，如有問題請多多指出，謝謝。