您当前的位置:网站首页>JS>如何使用JavaScript完成省市联动效果 找JS教程就上ki4.cc (>^ω^<),JavaScript

如何使用JavaScript完成省市联动效果 找JS教程就上ki4.cc (>^ω^<),JavaScript

2020年05月11日 投稿作者: 围观人数:40

JS中数组的迭代方法:filter、reduce、every、some 找JS教程就上ki4.cc (>^ω^<)

在日常处理JS的数组过程中,我们通常是采用for循环的方式来实现,本篇文章总结一些常用的除for循环之外的数组迭代方法。

省市联动效果

【HTML中的DOM操作】

一些常用的 HTML DOM 方法:

getElementById(id) - 获取带有指定 id 的节点(元素)

appendChild(node) - 插入新的子节点(元素)

removeChild(node) - 删除子节点(元素)

一些常用的 HTML DOM 属性:

innerHTML - 节点(元素)的文本值

parentNode - 节点(元素)的父节点

childNodes - 节点(元素)的子节点

attributes - 节点(元素)的属性节点

查找节点:

getElementById() 返回带有指定 ID 的元素。

getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。

getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。

利用js实现图片的轮播效果 找JS教程就上ki4.cc (>^ω^<)

本文为大家介绍了利用js实现图片的轮播效果的方法,具有一定的参考价值,希望可以帮助到大家。window.setInterval():按照指定周期(以毫秒计)来调用函数。

增加节点:

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>

相关推荐:《javascript高级教程

以上就是如何使用JavaScript完成省市联动效果的详细内容,更多请关注ki4导航其它相关文章!

js中对象深拷贝和浅拷贝的区别是什么 找JS教程就上ki4.cc (>^ω^<)

本文为大家介绍了js中对象深拷贝和浅拷贝的区别,具有一定的参考价值,希望可以帮助到大家。拷贝是直接拷贝变量的值,而引用类型拷贝的其实是变量的地址。

标签

版权说明
免责声明:本文文章内容由ki4导航网发布,但不代表本站的观点和立场,具体内容可自行甄别.