<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<!--二级联动-->
<select id="province">
<option id='1'>山东省</option>
<option id='2'>辽宁省</option>
<option id='3'>吉林省</option>
</select>
<select id="city">
</select>
<script>
var provinceEle = document.getElementById("province");
provinceEle.onchange = function(){
var cityEle = document.getElementById("city");
cityEle.innerHTML = ""; // 每次进来先清空城市列表
var provinceValue = this.value;
/*
if(provinceValue == '山东省'){
cities = ['青岛市','济南市','威海市']
}
else if(provinceValue == '辽宁省'){
cities = ['沈阳市','大连市','锦州市']
}
else{
cities = ['吉林市','长春市','四平市']
}
*/
switch (province){
case "山东省"
cities = ['青岛市','济南市','威海市']
break;
case "辽宁省"
cities = ['沈阳市','大连市','锦州市']
break;
case "山东省"
cities = ['吉林市','长春市','四平市']
break;
}
for(var i = 0;i<cities.length;i++){
var option = document.createElement('option'); //先创建option
var textNode = document.createTextNode(cities[i]); //再把城市名作为子节点填入，也可用innerHTML
option.appendChild(textNode);
cityEle.appendChild(option);
}
}
</script>
</body>
</html>
