级联列表(笔试)

js 实现级联列表

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js实现联动菜单</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
	var province_cities = [
		["请选择"],
        ["济南","青岛","烟台"],
        ["杭州","宁波","温州"],
        ["南京","无锡","苏州"]
		];
	function change(){
		var p = document.getElementById("province");
		var citices = province_cities[p.value];
		var c = document.getElementById("city");
		
                //清空操作
		c.innerHTML = "";
		
		for(var i =0;i<citices.length;i++){
			var o = document.createElement("option");
			o.setAttribute("value",i);
			o.innerHTML = citices[i];
			c.appendChild(o);
		};
	};
</script>
</head>

<body>
	<p>
		<select id = "province" onchange = "change();">
			<option value = "0">请选择</option>
			<option value = "1">山东</option>
			<option value = "2">浙江</option>
			<option value = "3">江苏</option>
		</select>

		<select id = "city">
			<option value = "0">请选择</option>
		</select> 
	</p>
</body>
</html>

jQuery 实现级联列表

posted @ 2017-04-17 11:43  小鸣Cycling  阅读(316)  评论(0)  编辑  收藏  举报