一岳掐、JavaScript 省市級(jí)聯(lián)效果
1饭耳、代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>用js實(shí)現(xiàn)一個(gè)省市級(jí)聯(lián)效果</title>
</head>
<body>
<select id="prov">
<option value="none">請(qǐng)選擇省</option>
</select>
<select id="city" style="display:none"></select>
</body>
<script>
var provs={
"江西省":["南昌市", "景德鎮(zhèn)", "九江", "鷹潭", "萍鄉(xiāng)", "新馀", "贛州", "吉安", "宜春", "撫州", "上饒"],
"福建省":["福州", "廈門", "莆田", "三明", "泉州", "漳州", "南平", "龍巖", "寧德"],
"河北省":["石家莊", "邯鄲", "邢臺(tái)", "保定", "張家口", "承德", "廊坊", "唐山", "秦皇島", "滄州", "衡水"]
};
function loadProv() {
var prov = document.getElementById("prov");
for (var key in provs) {
var provName = key;
var optProv = document.createElement("option");
optProv.value = provName;
optProv.innerText = provName;
prov.appendChild(optProv);
}
}
function provChange() {
var prov = document.getElementById("prov");
var city = document.getElementById("city");
var provName = prov.value;
if (provName == "none") {
city.style.display = "none";
return;
}
else {
city.style.display = "";
}
var citys = provs[provName];
for (var index = city.childNodes.length - 1; index >= 0; index--) {
var child = city.childNodes[index];
city.removeChild(child);
}
for (var index = 0; index < citys.length; index++) {
var optCity = document.createElement("option");
optCity.value = citys[index];
optCity.innerText = citys[index];
city.appendChild(optCity);
}
}
window.onload=function(){
loadProv();
var prov = document.getElementById("prov");
prov.onchange=function(){provChange()}
}
</script>
</html>
2串述、代碼注釋
（1）var provs={}寞肖，存儲(chǔ)省市的json結(jié)構(gòu)數(shù)據(jù)剖煌。
（2）function loadProv() {}，此函數(shù)實(shí)現(xiàn)了初始化頁面加載數(shù)據(jù)的功能耕姊。
（3）var prov = document.getElementById("prov")，獲取存放省份的select下拉菜單茉兰。
（4）for (var key in provs)尤泽，遍歷json結(jié)構(gòu)數(shù)據(jù)规脸。
（5）var provName = key坯约，獲取省份的名稱莫鸭。
（6）var optProv = document.createElement("option")闹丐，創(chuàng)建一個(gè)option元素對(duì)象被因。
（7）optProv.value = provName卿拴，設(shè)置option元素的value屬性值梨与。
（8）optProv.innerText = provName堕花，設(shè)置option顯示的文本內(nèi)容粥鞋。
（9）prov.appendChild(optProv)缘挽，將option元素添加到select下拉菜單呻粹。
（10）function provChange() {}壕曼，作為onchange事件處理函數(shù)等浊。
（11）var prov = document.getElementById("prov"),獲取省份下拉菜單窝稿。
（12）var city = document.getElementById("city"),獲取城市下拉菜單凿掂。
（13）var provName = prov.value，獲取當(dāng)前選中的省份的value值纹蝴。
（14）if (provName == "none") {
city.style.display = "none";
return;
}，如果值等于none塘安，說明選中的是第一項(xiàng)，那么城市下拉菜單還是具有隱藏狀態(tài)兼犯，并跳出函數(shù)忍捡。
（15）else {
city.style.display = "";
},否則的話顯示出城市下拉菜單，默認(rèn)狀態(tài)它是隱藏的砸脊。
（16）var citys = provs[provName]具篇，獲取城市凌埂，citys是個(gè)數(shù)組驱显。
（17）for (var index = city.childNodes.length - 1; index >= 0; index--) {
var child = city.childNodes[index];
city.removeChild(child);
}瞳抓，遍歷城市下拉菜單下的option元素埃疫，然后刪除這些元素孩哑。
之所以清空就是為了防止當(dāng)再次加載的時(shí)候出現(xiàn)累加情況栓霜。
（18）for (var index = 0; index < citys.length; index++) {}横蜒，遍歷數(shù)組中的元素胳蛮，也就是城市愁铺。
（19）var optCity = document.createElement("option")鹰霍，創(chuàng)建option元素茵乱。
（20）optCity.value = citys[index]茂洒，設(shè)置option元素的value值瓶竭。
（21）optCity.innerText = citys[index]督勺，設(shè)置option元素的文本內(nèi)容斤贰。
（22）city.appendChild(optCity)智哀，將option元素添加select下拉菜單荧恍。
二瓷叫、js遞歸算法實(shí)現(xiàn)無限級(jí)樹形菜單
效果圖
數(shù)據(jù)類型一
1送巡、mysql表結(jié)構(gòu)形式數(shù)據(jù)
var data = [
{ id: 1, name: '廣東', pid: 0 },
{ id: 2, name: '廣州', pid: 1 },
{ id: 3, name: '天河', pid: 2 },
{ id: 4, name: '白云', pid: 2 },
{ id: 5, name: '廣西', pid: 0 },
{ id: 6, name: '玉林', pid: 5 },
{ id: 7, name: '北流', pid: 6 },
{ id: 8, name: '深圳', pid: 1 },
{ id: 9, name: '東莞', pid: 1 },
{ id: 10, name: '松山湖', pid: 9 },
]
2摹菠、js實(shí)現(xiàn)部分
var menu = '';
menuFn(0, data)
$("body").append(menu)
function menuFn(id, data) {
if (data.length > 0) {
for (var i = 0; i < data.length; i++) { //獲取省一級(jí)
if (data[i].pid == id) {
// console.log(data[i])
menu += "<ul>"
menu += "<li>" + data[i].name
// menu += "<li>"+"id::" + data[i].id + ",name:"+ data[i].name + ",pid:"+ data[i].pid
menuFn(data[i].id, data) //遞歸
menu += "</li>"
menu += "</ul>"
}
}
return menu;
}
}
數(shù)據(jù)類型二
1骗爆、json結(jié)構(gòu)形式數(shù)據(jù)
var data = [
{
id: 1, name: "廣東", pid: 0,
children: [
{
id: 2, name: "廣州", pid: 1,
children: [
{ id: 3, name: "天河", pid: 2 },
{ id: 4, name: "白云", pid: 2 },
],
},
{ id: 8, name: "深圳", pid: 1 },
{
id: 9, name: "東莞", pid: 1,
children: [
{ id: 10, name: "松山湖", pid: 9 },
]
},
]
},
{
id: 5, name: "廣西", pid: 0,
children: [
{
id: 6, name: "玉林", pid: 5,
children: [
{ id: 7, name: "北流", pid: 6 },
]
},
]
},
];
2、js實(shí)現(xiàn)
var menu = '';
menuFn(0, data)
$("body").append(menu)
function menuFn(id, data) {
if (data.length > 0) {
for (var i = 0; i < data.length; i++) { //獲取省一級(jí)
if (data[i].pid == id) {
// console.log(data[i])
menu += "<ul>"
menu += "<li>" + data[i].name
// menu += "<li>"+"id::" + data[i].id + ",name:"+ data[i].name + ",pid:"+ data[i].pid
if (data[i].children) {
menuFn(data[i].id, data[i].children) //遞歸
}
menu += "</li>"
menu += "</ul>"
}
}
return menu;
}
}
兩者區(qū)別
數(shù)據(jù)表形式數(shù)據(jù)
menuFn(data[i].id, data) //遞歸
json形式數(shù)據(jù)
if (data[i].children) {
menuFn(data[i].id, data[i].children) //遞歸
}
多級(jí)折疊菜單
效果圖
說明
this指向
function fn() {
// console.log(this) //span em
}
$("#app").delegate("span", "click", fn)
$("#app").delegate("em", "click", fn)
兩者區(qū)別
$(this).parent().children("ul")[0]
$($(this).parent().children("ul")[0])
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
ul,
li {
list-style: none;
}
li {
position: relative;
line-height: 30px;
padding-left: 20px
}
em {
position: absolute;
top: 7px;
left: 0;
width: 16px;
height: 16px;
background: url("jian.png") no-repeat;
cursor: pointer;
background-size: 16px 16px;
}
em.open{
background: url("jia.png") no-repeat;
background-size: 16px 16px;
}
</style>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
var data = [
{
id: 1, name: "廣東", pid: 0,
children: [
{
id: 2, name: "廣州", pid: 1,
children: [
{ id: 3, name: "天河", pid: 2 },
{ id: 4, name: "白云", pid: 2 },
],
},
{ id: 8, name: "深圳", pid: 1 },
{
id: 9, name: "東莞", pid: 1,
children: [
{ id: 10, name: "松山湖", pid: 9 },
]
},
]
},
{
id: 5, name: "廣西", pid: 0,
children: [
{
id: 6, name: "玉林", pid: 5,
children: [
{ id: 7, name: "北流", pid: 6 },
]
},
]
},
];
var menu = '';
menuFn(0, data)
$("#app").append(menu)
function menuFn(id, data) {
if (data.length > 0) {
menu += "<ul>"
for (var i = 0; i < data.length; i++) { //獲取省一級(jí)
if (data[i].pid == id) {
menu += "<li>"
if(data[i].children){
menu += '<em></em><span>' + data[i].name + "</span>"
menuFn(data[i].id, data[i].children) //遞歸
}else{
menu += '<span>' + data[i].name + "</span>"
}
menu += "</li>"
}
}
menu += "</ul>"
return menu;
}
}
function fn() {
var ull = $($(this).parent().children("ul")[0]);
if (ull.length > 0) {
ull.toggle();
$(this).toggleClass("open")
}
}
$("#app").delegate("span", "click", fn)
$("#app").delegate("em", "click", fn)
})
</script>
</body>
</html>
自定義修改樹狀數(shù)據(jù)
function formatTree(data) {
const treeData = []
data.forEach((list) => {
const newData = {}
newData.key = list.id
newData.value = list.id
newData.title = list.name
newData.children = list.children ? formatTree(list.children) : []
treeData.push(newData)
})
return treeData
}
