Using JavaScript to complete the provincial and municipal linkage effect

Provincial and municipal linkage effect

technical analysis

What is DOM: Document Object Model: manage our documents, add, delete, modify and query rules
DOM operation in HTML

Some common HTML DOM methods:
getElementById(id) - gets the node (element) with the specified id
appendChild(node) - inserts a new child (element)
removeChild(node) - delete child nodes (elements)

Some common HTML DOM properties:
innerHTML - the text value of the node (element)
parentNode - the parent of the node (element)
childNodes - children of a node (element)
attributes - attribute node of the node (element)

Find node:
getElementById() returns the element with the specified ID.
getElementsByTagName() returns a list of nodes (collection / node array) that contain all elements with the specified tag name.
getElementsByClassName() returns a list of nodes 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 before the specified child.
appendChild() adds a new child node to the specified node.

To delete a node:
removeChild() deletes the child node.
replaceChild() replaces the child node.

Modify node:
setAttribute() modifying attributes
setAttributeNode() modify attribute node

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			
			/*Dynamic addition: < p > text</p> */
			function dianwo(){
				var div = document.getElementById("div1");
				//Create element node
				var p = document.createElement("p");  // <p></p>
				//Create text node
				var textNode = document.createTextNode("Text content");//  Text content
				
				//Associate p with text content
				p.appendChild(textNode);  //  <p>Text</p> 
				
				//Add P to the target div
				div.appendChild(p);
			}
			
		</script>
	</head>
	<body>
		<input type="button" value="Point me,Add to P" onclick="dianwo()" />
		<!--I'm going to move to this Div Add node to-->
		<div id="div1">
			
		</div>
	</body>
</html>

code implementation

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			/*
				Preparation: data preparation
			*/
			var provinces = [
				["Shenzhen City","Dongguan City","Huizhou City","Guangzhou City"],
				["Changsha City","Yueyang City","Zhuzhou City","Xiangtan City"],
				["Xiamen","Fuzhou City","Zhangzhou City","Quanzhou City"]
			];
			/*
				1. Determine event: onchange
				2. Function: selectProvince()
				3. Something's going on in the function
					Get the current operation element
					Which province is currently selected
					Get the corresponding city information from the array
					
					Dynamic creation of city element node
					Add to City select
					
			*/
			function selectProvince(){
				var province = document.getElementById("province");
				//Get which province is currently selected
				//alert(province.value);
				var value = province.value;
				//Get the corresponding city information from the array
				var cities = provinces[value];
				var citySelect = document.getElementById("city");
				//Clear option in select
				citySelect.options.length = 0;
				
				for (var i=0; i < cities.length; i++) {
//					alert(cities[i]);
					var cityText = cities[i]; 
					//Dynamic creation of city element node < option > Dongguan City < / option >
					
					//Create option node
					var option1 = document.createElement("option"); // <option></option>
					//Create City text node
					var textNode = document.createTextNode(cityText) ;// Dongguan City
					
					//Associate the option node with the text content
					option1.appendChild(textNode);  //< option > Dongguan City < / option >
					
//					Add to City select
					citySelect.appendChild(option1);
				}
				
			}
			
		</script>
	</head>
	<body>
		<!--Select Province-->
		<select onchange="selectProvince()" id="province">
			<option value="-1">--Please select--</option>
			<option value="0">Guangdong Province</option>
			<option value="1">Hunan Province</option>
			<option value="2">Fujian Province</option>
		</select>
		<!--Select city-->
		<select id="city"></select>
	</body>
</html>

Tags: Javascript Attribute

Posted on Wed, 06 May 2020 12:35:45 -0400 by daniel_lee_hill