如何使用JavaScript完成省市連動效果-js教程-PHP中文網

首頁

web前端

js教程

如何使用JavaScript完成省市連動效果

藏色散人

May 08, 2020 pm 04:51 PM

javascript

省市連動效果

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

如何使用JavaScript完成省市連動效果

相關推薦：《javascript進階教學》

以上是如何使用JavaScript完成省市連動效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：cnblogs。如有侵權，請聯絡admin@php.cn刪除

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。