省市区联动

(function(){
var count = [
{
name : '四川省',
citys : [
{
name : '成都市',
area : ['成都1区','成都2区','成都3区'],
},
{
name : '绵阳市',
area : ['绵阳1区','绵阳2区','绵阳3区'],
},
{
name : '广元市',
area : ['广元1区','广元2区','广元3区'],
},
],
},
{
name : '广东省',
citys : [
{
name : '广州市',
area : ['广州1区','广州2区','广州3区'],
},
{
name : '东莞市',
area : ['东莞1区','东莞2区','东莞3区'],
},
{
name : '佛山市',
area : ['佛山1区','佛山2区','佛山3区'],
},
],
},
{
name : '河南省',
citys : [
{
name : '洛阳市',
area : ['洛阳1区','洛阳2区','洛阳3区'],
},
{
name : '开封市',
area : ['开封1区','开封2区','开封3区'],
},
{
name : '郑州市',
area : ['郑州1区','郑州2区','郑州3区'],
},
],
},
];

var prenvice = document.getElementById('prenvice');
var cityS = document.getElementById('city');
var areaS = document.getElementById('area');

readPrenvice();
readCity(0);
readArea(0,0);
prenvice.onchange = function(){
readCity(prenvice.selectedIndex);
//readArea(prenvice.selectedIndex,cityS.selectedIndex);
readArea(prenvice.selectedIndex,0);
};
cityS.onchange = function(){
readArea(prenvice.selectedIndex,cityS.selectedIndex);
};

function readPrenvice(){
var str = '';
for(var i = 0; i < count.length; i++){
str += '<option>' + count[i].name + '</option>';
}
prenvice.innerHTML = str;
}

function readCity(prenviceIndex){
var city = count[prenviceIndex].citys;
cityS.innerHTML = '';
for(var i = 0; i < city.length; i++){
var city1 = city[i].name;
var option = document.createElement('option');
option.innerHTML = city1;
cityS.appendChild(option);
}
}
function readArea(prenviceIndex,cityIndex){
var city = count[prenviceIndex].citys;
var area1 = city[cityIndex].area;
areaS.innerHTML = '';
for(var i = 0; i < area1.length; i++){
var option = document.createElement('option');
option.innerHTML = area1[i];
areaS.appendChild(option);
}
}

})();