<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function showCity() {
var citys = [[],["guangzhou","fousan","zhongsan"],["changsha","hengyang","yueyang"]];
var provinceNode = document.getElementById("province");
var selectIndex = provinceNode.selectedIndex;
var cityDatas = citys[selectIndex];
var cityNode = document.getElementById("city");
// //先清空city框所有option
// var children = cityNode.childNodes;
// for(var i = 0; i<children.length ; ){
// cityNode.removeChild(children[i]);
// }
cityNode.options.length = 1;
for(var index = 0;index<cityDatas.length;index++){
var option = document.createElement("option");
option.innerHTML = cityDatas[index];
cityNode.appendChild(option);
}
}
</script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
省份<select id="province" onchange="showCity()">
<option>省份</option>
<option>广东</option>
<option>湖南</option>
</select>
城市<select id="city"><option>城市</option></select>
</body>
</html>实现的联动框，主要就是当第一个下拉框onchange时，获取其中的selectIndex，再通过这个索引值获取选中的元素，根据元素来实现下一个下拉框的option