使用JavaScript完成省市联动效果
程序员文章站
2022-06-24 09:38:51
省市联动效果 技术分析 什么是DOM: Document Object Model : 管理我们的文档，增删改查规则 【HTML中的DOM操作】 一些常用的 HTML DOM 方法： getElementById(id) 获取带有指定 id 的节点（元素） appendChild(node) 插入新 ......
省市联动效果
技术分析
什么是dom: document object model : 管理我们的文档，增删改查规则
【html中的dom操作】
一些常用的 html dom 方法：
getelementbyid(id) - 获取带有指定 id 的节点（元素）
appendchild(node) - 插入新的子节点（元素）
removechild(node) - 删除子节点（元素）
一些常用的 html dom 属性：
innerhtml - 节点（元素）的文本值
parentnode - 节点（元素）的父节点
childnodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
查找节点：
getelementbyid() 返回带有指定 id 的元素。
getelementsbytagname() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getelementsbyclassname() 返回包含带有指定类名的所有元素的节点列表。
增加节点：
createattribute() 创建属性节点。
createelement() 创建元素节点。
createtextnode() 创建文本节点。
insertbefore() 在指定的子节点前面插入新的子节点。
appendchild() 把新的子节点添加到指定节点。
删除节点：
removechild() 删除子节点。
replacechild() 替换子节点。
修改节点：
setattribute() 修改属性
setattributenode() 修改属性节点
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/*动态添加 : <p>文本</p> */
function dianwo(){
var div = document.getelementbyid("div1");
//创建元素节点
var p = document.createelement("p"); // <p></p>
//创建文本节点
var textnode = document.createtextnode("文本内容");// 文本内容
//将p 和文本内容关联起来
p.appendchild(textnode); // <p>文本</p>
//将p添加到目标div中
div.appendchild(p);
}
</script>
</head>
<body>
<input type="button" value="点我,添加p" onclick="dianwo()" />
<!--一会动态的往这个div中添加节点-->
<div id="div1">
</div>
</body>
</html>
代码实现
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></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>