省市选择
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
案例：实现省市选择界面。请选择省的处理，从后向前删。
-->
<head>
<title>欢迎来到daomul的博客，欢迎再来，谢谢（省市选择）</title>
<script type="text/javascript">
var data = { "山东": ["济南", "青岛", "潍坊"], "河南": ["郑州", "洛阳", "三门峡"], "辽宁": ["沈阳", "鞍山", "大连"] };
function loadProv() {
var prov = document.getElementById("prov");
for (var key in data) {
var option = document.createElement("option");
option.value = key;
option.innerText = key;
prov.appendChild(option);
}
}
function provChange() {
var prov = document.getElementById("prov");
var city = document.getElementById("city");
/* 先清除旧的市列表
可以采取这种方式city.option.length=0;
遍历select的所有子节点，如果从前往后删，每次都会有漏网之鱼，因为有重新排号的问题
从后向前删就没顺序问题了 */
for (var i = city.childNodes.length - 1; i >= 0; i--) {
var option = city.childNodes[i];
city.removeChild(option);
}
var provName = prov.value;
var cities = data[provName]; //取出的内容["济南", "青岛", "潍坊"]
for (var i = 0; i < cities.length; i++) {
var option = document.createElement("option");
option.value = cities[i];
option.innerText = cities[i];
city.appendChild(option);
}
}
</script>
</head>
<body>
<select onchange="provChange()">
<option value="请选择省">--请选择省--</option>
</select>
<select>
</select>
</body>
</html>
案例3：复选框实现全选、全不选、反选
复制代码 代码如下: