省市联动

<!DOCTYPE html>

<head>

.box{

500px;

padding: 20px;

border: 1px solid #aaa;

border-radius: 3px;

margin: 100px auto;

}

.box select{

150px;

}

.box label{

margin:0 20px;

}

</style>

var provs = [{"id":"01","pName":"河南省"},{"id":"02","pName":"河北省"},{"id":"03","pName":"山西省"},{"id":"04","pName":"山东省"},{"id":"05","pName":"四川省"}];

var citys = [{"id":"001","cName":"安阳市","pId":"01"},{"id":"002","cName":"郑州市","pId":"01"},{"id":"003","cName":"新乡市","pId":"01"},{"id":"004","cName":"石家庄","pId":"02"},{"id":"005","cName":"邯郸","pId":"02"},{"id":"006","cName":"大同","pId":"03"},{"id":"007","cName":"太原","pId":"03"},{"id":"008","cName":"济南","pId":"04"},{"id":"009","cName":"青岛市","pId":"04"},{"id":"010","cName":"成都","pId":"05"},{"id":"011","cName":"绵阳市","pId":"05"}];

window.onload = function(){

//1.添加省份选择

var selProv = document.getElementById('province');

for (var i = 0; i < provs.length; i++) {

var opt = document.createElement('option');

opt.innerHTML = provs[i].pName;

// opt.innerHTML = provs[i]['pName'];

// 把省份的id写入到option的value属性中

opt.value = provs[i].id;

selProv.append(opt);

}

//2.选中省份后，动态创建出备选城市

var selCity = document.getElementById('city');

selProv.onchange = function(){

//2.0先清空城市下拉选框的选项

selCity.options.length = 1;

//2.1拿到所选省份的id

var pId = this.value;

for (var i = 0; i < citys.length; i++) {

if(citys[i].pId == pId){

var opt = document.createElement('option');

opt.innerHTML = citys[i].cName;

opt.value = citys[i].id;

selCity.append(opt);

}

</script>

</head>

<body>

请选择：

</select><label for="provice">省</label>

</select><label for="provice">市</label>

</div>

</body>

</html>