1.省市联动.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01省市联动</title>
</head>
<body>
<select>
<!--选择省份 -->
<option>---请选择---</option>
<option>北京</option>
<option>河北省</option>
<option>广东省</option>
<option>云南省</option>
</select>
<!--选择城市-->
<select>
<option></option>
</select>
</body>
</html>
<!--
描述:
什么是DOM: Document Object Model:管理我们的文档 CRUD规则
超文本标记语言作用:设计网页
CSS最重要的一点:选择器
-->
2.DOM.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02DOM</title>
</head>
<body>
<img src="../img/new_ban.png"/>
<p>文本</p>
</body>
</html>
03.DOM操作.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03DOM操作</title>
<script>
/**
* 动态添加<p>文本</p>
*
*/
function dian(){
var d1=document.getElementById("d1");
//创建元素节点
var p = document.createElement("p");
//创建文本节点
var textNode = document.createTextNode("文本文本");
//将p和内容连接起来
p.appendChild(textNode);
//将p添加到div中
d1.appendChild(p);
}
</script>
</head>
<body>
<input type="button" value="点我添加" onclick="dian()"/>
<!--
一会动态在div中添加节点
-->
<div id="d1">
</div>
</body>
</html>
04.省市联动操作.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04省市联动demo</title>
<script>
/*
准备工作 : 准备数据
*/
var provinces = [
["深圳市","东莞市","惠州市","广州市"],
["长沙市","岳阳市","株洲市","湘潭市"],
["厦门市","福州市","漳州市","泉州市"]
];
/*
1. 确定事件: onchange
2. 函数: selectProvince()
3. 函数里面要搞事情了
得到当前操作元素
得到当前选中的是那一个省份
从数组中取出对应的城市信息
动态创建城市元素节点
添加到城市select中
*/
function selectProvince(){
var province = document.getElementById("province");
//得到当前选中的是哪个省份
//alert(province.value);
var value = province.value;
//从数组中取出对应的城市信息
var cities = provinces[value];
var citySelect = document.getElementById("city");
//清空select中的option
citySelect.options.length = 0;
for (var i=0; i < cities.length; i++) {
// alert(cities[i]);
var cityText = cities[i];
//动态创建城市元素节点 <option>东莞市</option>
//创建option节点
var option1 = document.createElement("option"); // <option></option>
//创建城市文本节点
var textNode = document.createTextNode(cityText) ;// 东莞市
//将option节点和文本内容关联起来
option1.appendChild(textNode); //<option>东莞市</option>
// 添加到城市select中
citySelect.appendChild(option1);
}
}
</script>
</head>
<body>
<!--选择省份-->
<select onchange="selectProvince()" id="province">
<option value="-1">--请选择--</option>
<option value="0">广东省</option>
<option value="1">湖南省</option>
<option value="2">福建省</option>
</select>
<!--选择城市-->
<select id="city"></select>
</body>
</html>