29_用js实现一个省市级联效果
一、JavaScript 省市级联效果
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实现一个省市级联效果</title>
</head>
<body>
<select id="prov">
<option value="none">请选择省</option>
</select>
<select id="city" style="display:none"></select>
</body>
<script>
var provs={
"江西省":["南昌市", "景德镇", "九江", "鹰潭", "萍乡", "新馀", "赣州", "吉安", "宜春", "抚州", "上饶"],
"福建省":["福州", "厦门", "莆田", "三明", "泉州", "漳州", "南平", "龙岩", "宁德"],
"河北省":["石家庄", "邯郸", "邢台", "保定", "张家口", "承德", "廊坊", "唐山", "秦皇岛", "沧州", "衡水"]
};
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={}，存储省市的json结构数据。
（2）function loadProv() {}，此函数实现了初始化页面加载数据的功能。
（3）var prov = document.getElementById("prov")，获取存放省份的select下拉菜单。
（4）for (var key in provs)，遍历json结构数据。
（5）var provName = key，获取省份的名称。
（6）var optProv = document.createElement("option")，创建一个option元素对象。
（7）optProv.value = provName，设置option元素的value属性值。
（8）optProv.innerText = provName，设置option显示的文本内容。
（9）prov.appendChild(optProv)，将option元素添加到select下拉菜单。
（10）function provChange() {}，作为onchange事件处理函数。
（11）var prov = document.getElementById("prov"),获取省份下拉菜单。
（12）var city = document.getElementById("city"),获取城市下拉菜单。
（13）var provName = prov.value，获取当前选中的省份的value值。
（14）if (provName == "none") {
city.style.display = "none";
return;
}，如果值等于none，说明选中的是第一项，那么城市下拉菜单还是具有隐藏状态，并跳出函数。
（15）else {
city.style.display = "";
},否则的话显示出城市下拉菜单，默认状态它是隐藏的。
（16）var citys = provs[provName]，获取城市，citys是个数组。
（17）for (var index = city.childNodes.length - 1; index >= 0; index--) {
var child = city.childNodes[index];
city.removeChild(child);
}，遍历城市下拉菜单下的option元素，然后删除这些元素。
之所以清空就是为了防止当再次加载的时候出现累加情况。
（18）for (var index = 0; index < citys.length; index++) {}，遍历数组中的元素，也就是城市。
（19）var optCity = document.createElement("option")，创建option元素。
（20）optCity.value = citys[index]，设置option元素的value值。
（21）optCity.innerText = citys[index]，设置option元素的文本内容。
（22）city.appendChild(optCity)，将option元素添加select下拉菜单。
二、js递归算法实现无限级树形菜单
1、接口返回栏目数据
var data = [
{id: 1, address: "安徽", parent_id: 0},
{id: 2, address: "江苏", parent_id: 0},
{id: 3, address: "合肥", parent_id: 1},
{id: 4, address: "庐阳区", parent_id: 3},
{id: 5, address: "大杨镇", parent_id: 4},
{id: 6, address: "南京", parent_id: 2},
{id: 7, address: "玄武区", parent_id: 6},
{id: 8, address: "梅园新村街道", parent_id: 7},
{id: 9, address: "上海", parent_id: 0},
{id: 10, address: "黄浦区", parent_id: 9},
{id: 11, address: "外滩", parent_id: 10},
{id: 12, address: "安庆", parent_id: 1}
];
2、根据最后一个找到整个家族（家谱树）
//根据最后一个找到整个家族
function familyTree(arr, pid) {
var temp = [];
var forFn = function(arr, pid){
for (var i = 0; i < arr.length; i++) {
var item = arr[i];
if (item.id == pid) {
temp.push(item);
forFn(arr,item.parent_id);
}
}
};
forFn(arr, pid);
return temp;
}
//console.log(familyTree(data,10));
3、从顶级往下找到所有的子子孙孙（子孙树）
//子孙树，从顶级往下找到是有的子子孙孙
function sonsTree(arr,id){
var temp = [],lev=0;
var forFn = function(arr, id,lev){
for (var i = 0; i < arr.length; i++) {
var item = arr[i];
if (item.parent_id==id) {
item.lev=lev;
temp.push(item);
forFn(arr,item.id,lev+1);
}
}
};
forFn(arr, id,lev);
return temp;
}
//console.log(sonsTree(data,0));
4、利用子孙树生成一个树形dom结构（实例）
//利用 子孙树 生成dom结构
var tree = sonsTree(data,0);
var temp = [];
for(var i=0;i<tree.length;i++){
var item = tree[i],u = "";
if(i>0){
u = "</ul>";
}
if(item['lev']==0){
temp.push(u+'<li><a class="one">'+item.address+'</a><ul>');
}else{
temp.push('<li><a>'+item.address+'</a></li>')
}
if(i+1==tree.length){
temp.push("</ul>")
}
}
//console.log(temp.join(""));
//document.write(temp.join(""));
