How to use JavaScript to complete the linkage effect of provinces and cities-JS Tutorial-php.cn

How to use JavaScript to complete the linkage effect of provinces and cities

藏色散人

Release： 2020-05-08 16:51:40

forward

2671 people have browsed it

Province and city linkage effect

[DOM operations in HTML]

Some commonly used HTML DOM methods:

getElementById(id) - Get the node (element) with the specified id

appendChild(node) - Insert a new child node (element)

removeChild(node) - Remove the child node (element)

Some commonly used HTML DOM attributes:

innerHTML - the text value of the node (element)

parentNode - the parent node of the node (element)

childNodes - the node (element) )'s child node

attributes - the attribute node of the node (element)

Find the node:

getElementById() Returns the element with the specified ID.

getElementsByTagName() Returns a node list (collection/node array) containing all elements with the specified tag name.

getElementsByClassName() Returns a node list containing all elements with the specified class name.

Add node:

createAttribute() creates an attribute node.

createElement() Creates an element node.

createTextNode() Creates a text node.

insertBefore() Inserts a new child node before the specified child node.

appendChild() Adds a new child node to the specified node.

Delete node:

removeChild() deletes the child node.

replaceChild() Replaces child nodes.

Modify node:

setAttribute() Modify attribute

setAttributeNode() Modify attribute node

<!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>

Copy after login

Code implementation

<!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>

Copy after login

How to use JavaScript to complete the linkage effect of provinces and cities

Related recommendations: "javascript advanced tutorial"

The above is the detailed content of How to use JavaScript to complete the linkage effect of provinces and cities. For more information, please follow other related articles on the PHP Chinese website!