JS实现省市级联效果

在JS中利用数组实现省市级联效果

注意:

1. 文章中的代码仅仅是为了实现功能,并没有将所有的省市都写出来
2. 代码实现了省市级联的功能,但是还没有加载到网页中,所以在参考本文章代码后要注意这个细节

html代码:

<dl class="register_row">
    <dt>所在地区：</dt>
        <dd><select id="province" onChange="changeCity()" style="width:120px;">
                <option>请选择省/城市</option>
            </select>
        </dd>
        <dd><select id="city"  style="width:130px;">
                <option>请选择城市/地区</option>
            </select>
        </dd>
</dl>

JS代码:

首先:  创建省市的二维数组:

var cityList = new Array();
cityList['北京市'] = ['朝阳区', '西城区', '海淀区', '宣武区', '丰台区', '怀柔', '延庆'];
cityList['上海市'] = ['宝山区', '长宁区', '丰贤区', '虹口区', '黄浦区', '青浦区'];
cityList['广州省'] = ['广州市', '惠州市', '汕头市', '珠海市', '佛山市'];

其次:  将所有的省份都添加到省份的  select  中:

function allProvince(){
	var pro = document.getElementById("province");
	for (var i in cityList){
		pro.add(new Option(i));
	}
}

最后:  根据省份,将所有的城市都添加到城市的  select  中:

function changeCity(){
	// 获得省份框中的值
	var pros = document.getElementById("province").value;
	var city = document.getElementById("city");	
	// 将city 列表中的值清空,放置再选择省份后,出现城市乱增加的情况
	city.options.length=0;
	// 遍历
	for (var i in cityList){
		if (i==pros){
			for (var j in cityList[i]){								
				// 将 Option标签添加到Select中
				city.add(new Option(cityList[i][j]),null);									
			}
		}
	}	
}

// 在页面加载时调用方法
window.onload = allProvince;

效果: