- 这种方式需要用到html的dom操作方式(参考w3cschool的XML DOM操作),使用到的方法和属性如下:
方法名称 | 作用 |
---|
document.createElement() | 创建元素节点 |
document.createTextNode() | 创建文本节点 |
元素对象.appendChild() | 向节点的子节点列表末尾添加新的子节点 |
元素对象.removeChild() | 删除子节点 |
元素对象.hasChildNodes() | 返回元素是否拥有子节点 |
属性名称 | 作用 |
---|
元素对象.firstChild | 返回元素的首个子节点 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市级联</title>
<script type="text/javascript">
var citys = new Array(5);
citys[0] = [];
citys[1] = ["哈尔滨","齐齐哈尔","大庆","佳木斯"];
citys[2] = ["长春市","吉林市","四平市","通化市"];
citys[3] = ["沈阳市","锦州市","大连市","铁岭市"];
citys[4] = ["郑州市","洛阳市","安阳市","南阳市"];
function selectCity(pNode) {
var index = pNode.selectedIndex;
var cityData = citys[index];
var cityNode = document.getElementById("cityId");
while(cityNode.hasChildNodes()){
cityNode.removeChild(cityNode.firstChild);
}
var optionObj = document.createElement("option");
var textObj = document.createTextNode("‐‐请选择市‐‐");
optionObj.appendChild(textObj);
cityNode.appendChild(optionObj);
for (var index = 0; index < cityData.length; index++) {
var optionObj = document.createElement("option");
var textObj = document.createTextNode(cityData[index]);
optionObj.appendChild(textObj);
cityNode.appendChild(optionObj);
}
}
</script>
</head>
<body>
<select id="provinceId" onchange="selectCity(this)">
<option>‐请选择‐</option>
<option>黑龙江</option>
<option>吉林</option>
<option>辽宁</option>
<option>河南</option>
</select>
<select id="cityId">
<option value="">‐‐请选择市‐‐</option>
</select>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/78986b174fa7049ee6ec64083c7910a4.png)