案例需求
- 請使用原生 JS 完成省市聯動效果
靜態地址數據如下：{data: [
{province: ”北京”, cities:[“朝陽區”, “西城區”, “東城區”]},
{province: ”河北省”, cities:[“石家莊”, “唐山”, “邯鄲”]},
{province: ”山東省”, cities:[“濟南”, “泰安”, “青島”]}
]} - 點擊保存按鈕獲取表單各項數據和動態生成表格行將數據顯示在表格中.
效果圖:
分析和代碼實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加地址</title>
<style>
/*第一個table*/
.addTable{
/*border: 1px solid red;*/
width: 600px;
margin-left: 20px;
}
.addTable tr{
height: 40px;
}
.province,.city{
width: 200px;
height: 30px;
}
#address,#name,#phone{
width: 400px;
height: 30px;
padding-left: 10px;
}
.addBtn{
width: 80px;
height: 30px;
background-color: #2EAEFF;
border: 1px solid #2EAEFF;
}
/*第二個table*/
.userInfoTable{
border: 1px solid gray;
width: 100%;
}
.userInfoTable td,.userInfoTable th{
border: 1px solid gray;
}
.firstTr{
background-color: lightgray;
height: 30px;
}
#tbody tr{
height: 60px;
text-align: center;
}
.lastTr p:first-child{
float: left;
}
.lastTr p:last-child{
float: right;
}
</style>
<script>
/**
* 省市聯動
* // 1. 在頁面加載完成之後,給第一個select下拉框設置省的數據
*
* // 2. 在點擊第一個select中的某一個省時,在第二個select下拉框中設置相應的城市數據
*
* // 3. 把添加數據表格中的數據保存到第二個table表格中
*/
window.onload = function () {
var json = {
data: [
{province: "北京", cities:["朝陽區","西城區","東城區"]},
{province: "河北省", cities:["石家莊", "唐山", "邯鄲"]},
{province: "山東省", cities:["濟南", "泰安", "青島"]}
]};
// 1. 在頁面加載完成之後,給第一個select下拉框設置省的數據
// 獲取第一個select元素對象
let provinceEl = document.getElementById("province")
// 獲取所有城市的數據
for (let i = 0; i < json.data.length; i++) {
// 在select元素之後追加新的option元素
provinceEl.innerHTML += `<option value="${i}">${json.data[i].province}</option>`;
}
// 2. 在點擊第一個select中的某一個省時,在第二個select下拉框中設置相應的城市數據
// 獲取第二個select元素對象
let cityEl = document.getElementById("city");
// 給第一個下拉列表select添加onchange事件
provinceEl.onchange = function () {
// 獲取當前選擇option的序號
let index = this.value;
// 獲取省對應的所有城市的數據
let cts = json.data[index].cities;
// 恢復初始狀態
cityEl.innerHTML = ``;
for (let i = 0; i < cts.length; i++) {
// 在第二個select元素之後追加新的option元素
cityEl.innerHTML += `<option value="${i}">${cts[i]}</option>`;
}
};
// 3. 把添加數據表格中的數據保存到第二個table表格中
// 獲取 提交按鈕元素對象
let addBtnEl = document.getElementById("add-btn");
let addressEl = document.getElementById("address");
let nameEl = document.getElementById("name");
let phoneEl = document.getElementById("phone");
var tbodyEl = document.getElementById("tbody");
var countEl = document.getElementById("count");
// 給第一個表格中的提交按鈕註冊一個點擊事件
addBtnEl.onclick = function () {
// 獲取第一個表格中 所在地區 詳細地址 收貨人姓名 聯繫電話 的數據
let prov_index = provinceEl.value;
let city_index = cityEl.value;
// 根據 相應 value值的所有找到相應的省市城市數據
let prov = json.data[prov_index].province;
let city = json.data[prov_index].cities[city_index];
var address = addressEl.value;
var name = nameEl.value;
var phone = phoneEl.value;
tbodyEl.innerHTML += `<tr>
<td>${name}</td>
<td>${prov}${city}</td>
<td>${address}</td>
<td>${phone}</td>
<td><a href="">操作</a></td>
</tr>`;
// 更新表格中的 總人數
countEl.innerHTML = parseInt(countEl.innerHTML) + 1;
}
// 給第二個表格追加一行,把獲取的數據保存起來
}
</script>
</head>
<body>
<h3>添加地址</h3>
<table class="addTable">
<tr>
<td width="100px">所在地區：</td>
<td>
<select name="province" class="province" id="province">
<option value="">---請選擇---</option>
</select>
<select name="city" class="city" id="city">
<option value="">---請選擇---</option>
</select>
</td>
</tr>
<tr>
<td>詳細地址：</td>
<td><input type="text" name="address" id="address"></td>
</tr>
<tr>
<td>收貨人姓名：</td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td>練習電話：</td>
<td><input type="text" name="phone" id="phone"></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="保存" class="addBtn" id="add-btn"></td>
</tr>
</table>
<table class="userInfoTable" cellspacing="0">
<tr class="firstTr">
<th>收貨人</th>
<th>所在地區</th>
<th>詳細地址</th>
<th>電話/手機</th>
<th>操作</th>
</tr>
<tbody id="tbody">
<tr>
<td>張三</td>
<td>北京市海淀區</td>
<td>金燕龍</td>
<td>13366668888</td>
<td><a href="">操作</a></td>
</tr>
<tr>
<td>張三</td>
<td>北京市海淀區</td>
<td>金燕龍</td>
<td>13366668888</td>
<td><a href="">操作</a></td>
</tr>
</tbody>
<tr class="lastTr">
<td colspan="5">
<p>總人數：<span id="count">2</span></p>
<p>最終解釋權歸劉達亮所有</p>
</td>
</tr>
</table>
</body>
</html>