JavaScript -- DOM对象操作完成省市二级联查

DOM的常用操作

获得元素：

• document.getElementById(); 通过id属性获取元素对象
• getElementByTagName(); 通过标签名获取元素对象
• getElementByName(); 通过name属性获取元素对象

创建元素

• document.createElement("标签名"); 通过指定名称创建一个元素(标签)
• document.createTextNode("文本"); 创建文本节点

添加节点：

• element.appendChild(""); 在指定的element元素的最后添加一个子节点;
• element.insertBefore(); 在指定的element元素之前添加节点

删除节点

• element.removeChild();

使用Js完成省市二级联动演示:

//已知有5个省,希望达到点击某个省份时,动态的显示该省下的城市的效果
<select id="province" name="province" οnchange="changeProvince(this.value)">
			<option value="">--请选择--</option>
			<option value="0">浙江省</option>
			<option value="1">江苏省</option>
			<option value="2">湖北省</option>
			<option value="3">河北省</option>
			<option value="4">吉林省</option>
		</select>
		<select id="city" name="city">
			<option value="">--请选择--</option>
		</select>

原理分析:

• 首先创建一个二维数组,用来存储province和city
• 绑定事件onchange：事件会在域的内容改变时发生。
• 遍历二维数组,动态的将元素节点添加到city的下拉框中
• 清空city下拉框中多余的元素

<script type="text/javascript">
	//1. 创建一个二维数组,用来存储province和city
	var arrs = new Array(5);
	arrs[0] = new Array("杭州市", "绍兴市", "温州市", "义乌市", "嘉兴市");
	arrs[1] = new Array("南京市", "苏州市", "扬州市", "无锡市");
	arrs[2] = new Array("武汉市", "襄阳市", "荆州市", "宜昌市", "施恩");
	arrs[3] = new Array("石家庄市", "唐山市", "保定市", "邢台市", "廊坊市");
	arrs[4] = new Array("长春市", "吉林市", "四平市", "延边市");

	function changeProvince(value) {
		//获取city下拉框对象的权限
		var cityEle = document.getElementById("city");
		
		//清除多余的元素 --> 不然每次点一个province,city中都会继续累加  将所有的option设置为null即可
		for(var i = cityEle.options.length;i>0;i--){		//cityEle.options返回的是一个option集合( HTMLOptionsCollection)
			cityEle.options[i] = null;
		}
		
		//遍历二维数组,动态的将元素节点添加到city的下拉框中
		for (var i = 0; i < arrs.length; i++) {
			//如果province所对应的value与索引匹配
			if (value == i) {
				//那么找到了该省对应的市,继续遍历存放city的数组
				for (var j = 0; j < arrs[i].length; j++) {
					//使用createElement()方法,动态的创建option元素
					var elements = document.createElement("option");
					//使用createTextNode()方法,创建文本节点,并将存放city的数组数据存入其中
					var textNode = document.createTextNode(arrs[i][j]);
					//将textNode节点添加到element节点中
					elements.appendChild(textNode);
					//将element节点添加到cityEle节点下
					nodes = cityEle.appendChild(elements);
				}
			}
		}
		
		
	}
</script>