动态添加城市
-
需求:
点击一个按钮, 动态实现添加城市; -
实现步骤:
- 确定事件类型onclick
- 对于事件绑定一个函数addLiElement()
- 获取到用户在input输入框中填写的信息;
city = document.getElementById(“city”).value
city = document.getElementsByName(“city”)[0].value
2). 创建一个城市的文本节点;document.createTextNode(‘xxxx’)
3). 创建一个li的元素节点; document.createElement(‘xxxx’)
4). 将文本节点添加到li元素节点里面去;
5). 将整体添加到ul标签里面去;
使用appendChild()来添加子节点;
- 获取到用户在input输入框中填写的信息;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function addCity(){
// 1) 获取到用户在input输入框中填写的信息;
var city = document.getElementById("city").value;
// 2). 创建一个城市的文本节点;
var textNode = document.createTextNode(city);
// 3). 创建一个li的元素节点;
var liEleNode = document.createElement('li');
// 4). 将文本节点添加到li元素节点里面去;
liEleNode.appendChild(textNode);
// 5). 将整体添加到ul标签里面去;
var ulEleNode = document.getElementById('ul_city');
ulEleNode.appendChild(liEleNode);
}
</script>
</head>
<body>
<input type="text" placeholder="请输入城市" id='city'>
<input type="submit" value="添加城市" onclick="addCity()">
<ul id="ul_city">
<li>北京</li>
<li>上海</li>
<li>西安</li>
</ul>
</body>
</html>
二级联动的实现
1. 需求分析
省市的二级联动
2. 步骤实现
-
1). 确定事件类型onchange, 并为其绑定一个函数;
-
2). 修改下拉列表内容;
-
2-1). 获取用户选择的省份;
-
2-2). 创建一个二维数组, 用来存储省份和城市的对应关系;
-
2-3). 遍历二维数组中的省份;
-
2-4). 遍历时省份编号和用户选择的省份编号进行比较,
-
2-5). 如果相同, 遍历该省份下的所有城市;
- 将每一个城市以城市名添加到select里面去; -
2-6). 如果不相同, 继续循环遍历省份;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 0 auto;
text-align: center;
margin-top: 10%;
}
</style>
<script>
function changeCity() {
// 1. 获取用户选择的省份;
var choiceProvince = document.getElementById('province').value;
// alert(choiceProvince);
// 2. 创建一个二维数组, 用来存储省份和城市的对应关系;
// 如何创建二维数组?
var cites=new Array(3);
// 默认的规则: 索引为0, 存储陕西的城市;
cites[0] = new Array("西安","宝鸡","咸阳");
cites[1] = new Array("成都","乐山","绵阳");
cites[2] = new Array("济南","青岛","烟台");
//8. 找出关于城市的下拉列表(根据id=“city”)
var selectEleNode = document.getElementById('city');
// 9. 清空第二个下拉列表里面的所有option标签;
selectEleNode.options.length = 0;
// 3. 遍历时省份编号和用户选择的省份编号进行比较
for(var i = 0; i < cites.length; i++){
//此处比较的是省份编号
if (choiceProvince == i){
// 4. 如果相同, 遍历该省份下的所有城市 ;
for(var j=0; j<cites[i].length; j++){
// alert(cites[i][j]);
//5. 创建城市的文本节点;
var textNode = document.createTextNode(cites[i][j]);
//6. 创建option的元素节点
var optionEleNode = document.createElement("option");
//7. 将城市的文本节点追加到option元素节点里面去;
optionEleNode.appendChild(textNode);
//9. 将option节点内容追加到select节点里面去;
selectEleNode.appendChild(optionEleNode);
}
}
// 5. 如果不相同, 继续循环遍历省份;
}
}
</script>
</head>
<body>
<form>
<div>
<span>籍贯:</span>
<select id='province' onchange="changeCity()">
<option>--省份--</option>
<option value="0">陕西省</option>
<option value="1">四川省</option>
<option value="2">山东省</option>
</select>
<select id="city">
<option>--市区--</option>
</select>
</div>
</form>
</body>
</html>