二级选择 多选框html,html选择框多级联动

Demo来源：http://www.imuum.com/plugin-jquery-cityselect-js-provinces-linkage-effect.html

我把Demo改写成最多可以到5级联动，需要增加修改也很容易

数据来源，Java端通过Spring boot输出将实体类转成JSON对象，转换效率有点低

TreeItem.java

public class TreeItem {

private String id;

private String pId;

private String name;

private String extra;

public TreeItem(String id,String pId,String name) {

this.id = id;

this.pId = pId;

this.name = name;

}

public TreeItem(String id,String pId, String name, String extra) {

this.id = id;

this.pId = pId;

this.name = name;

this.extra = extra;

}

public String getId() {

return id;

}

public void setId(String id) {

this.id = id;

}

public String getpId() {

return pId;

}

public void setpId(String pId) {

this.pId = pId;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

}Tree.java

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

public class Tree {

private List nodes;

public Tree(List nodes){

this.nodes = nodes;

}

public Map buildTree(){

List> list=new ArrayList<>();

for (TreeItem node : nodes) {

String id = node.getId();

if (node.getpId() == null) {

list.add(build(node));

}

}

Map treeMap=new HashMap<>();

treeMap.put("citylist",list);

return treeMap;

}

private Map build(TreeItem node){

List children = getChildren(node);

List> list=new ArrayList<>();

Map map=new HashMap<>();

map.put("node",node);

if (children.isEmpty()) {

return map;

}

for (TreeItem child : children) {

list.add(build(child));

}

map.put("children",list);

return map;

}

private List getChildren(TreeItem node){

List children = new ArrayList();

String id = node.getId();

for (TreeItem child : nodes) {

if (id.equals(child.getpId())) {

children.add(child);

}

}

return children;

}

}通过调用Tree.buildTree函数就可以生成我们需要的json数据

然后就是前端页面了，预设值部分还没有做

index.html

基于jQuery+JSON的省市联动效果

$(function(){

$("#city").citySelect({

nodata:null,

required:false

});

});

设置省份、城市、地区(县)的默认值

三级联动