web 動態新增城市和二級聯動的實現
阿新 • • 發佈：2018-11-09
動態新增城市
-
需求:
點選一個按鈕， 動態實現新增城市; -
實現步驟:
- 確定事件型別onclick
- 對於事件繫結一個函式addLiElement()
- 獲取到使用者在input輸入框中填寫的資訊;
city = document.getElementById(“city”).value
city = document.getElementsByName(“city”)[0].value
2). 建立一個城市的文字節點；document.createTextNode(‘xxxx’)
3). 建立一個li的元素節點; document.createElement(‘xxxx’)
4). 將文字節點新增到li元素節點裡面去;
5). 將整體新增到ul標籤裡面去;
使用appendChild()來新增子節點;
- 獲取到使用者在input輸入框中填寫的資訊;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function addCity(){ // 1) 獲取到使用者在input輸入框中填寫的資訊; var city = document.getElementById("city").value; // 2). 建立一個城市的文字節點； var textNode = document.createTextNode(city); // 3). 建立一個li的元素節點; var liEleNode = document.createElement('li'); // 4). 將文字節點新增到li元素節點裡面去; liEleNode.appendChild(textNode); // 5). 將整體新增到ul標籤裡面去; var ulEleNode = document.getElementById('ul_city'); ulEleNode.appendChild(liEleNode); } </script> </head> <body> <input type="text" placeholder="請輸入城市" id='city'> <input type="submit" value="新增城市" onclick="addCity()"> <ul id="ul_city"> <li>北京</li> <li>上海</li> <li>西安</li> </ul> </body> </html>
二級聯動的實現
1. 需求分析
省市的二級聯動
2. 步驟實現
-
1). 確定事件型別onchange, 併為其繫結一個函式;
-
2). 修改下拉列表內容;
-
2-1). 獲取使用者選擇的省份;
-
2-2). 建立一個二維陣列， 用來儲存省份和城市的對應關係;
-
2-3). 遍歷二維陣列中的省份；
-
2-4). 遍歷時省份編號和使用者選擇的省份編號進行比較，
-
2-5). 如果相同， 遍歷該省份下的所有城市;
- 將每一個城市以城市名新增到select裡面去; -
2-6). 如果不相同， 繼續迴圈遍歷省份;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 0 auto;
text-align: center;
margin-top: 10%;
}
</style>
<script>
function changeCity() {
// 1. 獲取使用者選擇的省份;
var choiceProvince = document.getElementById('province').value;
// alert(choiceProvince);
// 2. 建立一個二維陣列， 用來儲存省份和城市的對應關係;
// 如何建立二維陣列？
var cites=new Array(3);
// 預設的規則： 索引為0， 儲存陝西的城市;
cites[0] = new Array("西安","寶雞","咸陽");
cites[1] = new Array("成都","樂山","綿陽");
cites[2] = new Array("濟南","青島","煙臺");
//8. 找出關於城市的下拉列表(根據id=“city”)
var selectEleNode = document.getElementById('city');
// 9. 清空第二個下拉列表裡面的所有option標籤;
selectEleNode.options.length = 0;
// 3. 遍歷時省份編號和使用者選擇的省份編號進行比較
for(var i = 0; i < cites.length; i++){
//此處比較的是省份編號
if (choiceProvince == i){
// 4. 如果相同， 遍歷該省份下的所有城市 ；
for(var j=0; j<cites[i].length; j++){
// alert(cites[i][j]);
//5. 建立城市的文字節點;
var textNode = document.createTextNode(cites[i][j]);
//6. 建立option的元素節點
var optionEleNode = document.createElement("option");
//7. 將城市的文字節點追加到option元素節點裡面去;
optionEleNode.appendChild(textNode);
//9. 將option節點內容追加到select節點裡面去;
selectEleNode.appendChild(optionEleNode);
}
}
// 5. 如果不相同， 繼續迴圈遍歷省份;
}
}
</script>
</head>
<body>
<form>
<div>
<span>籍貫：</span>
<select id='province' onchange="changeCity()">
<option>--省份--</option>
<option value="0">陝西省</option>
<option value="1">四川省</option>
<option value="2">山東省</option>
</select>
<select id="city">
<option>--市區--</option>
</select>
</div>
</form>
</body>
</html>
