省市聯動效果
技術分析
什么是DOM: Document Object Model : 管理我們的檔案，增刪改查規則
【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="https://www.cnblogs.com/zllk/p/點我,添加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 = https://www.cnblogs.com/zllk/p/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="https://www.cnblogs.com/zllk/p/-1">--請選擇--</option>
<option value="https://www.cnblogs.com/zllk/p/0">廣東省</option>
<option value="https://www.cnblogs.com/zllk/p/1">湖南省</option>
<option value="https://www.cnblogs.com/zllk/p/2">福建省</option>
</select>
<!--選擇城市-->
<select id="city"></select>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/96603.html
標籤：JavaScript