1、后台获取的数据格式为json格式数据。其格式如下:
{ "data": [ { "id": "22", "name": "亚洲", "children": [ { "id": "23", "name": "韩国", "children": [ { "id": "24", "name": "首尔", "children": [] } ] }, { "id": "45", "name": "中国", "children": [ { "id": "46", "name": "北京", "children": [] }, { "id": "47", "name": "上海", "children": [] }, { "id": "50", "name": "深圳", "children": [] } ] }, { "id": "51", "name": "测试删名字很长很长很长很长很长很长", "children": [ { "id": "53", "name": "测试空格输出", "children": [] } ] } ] }, { "id": "25", "name": "欧洲", "children": [ { "id": "26", "name": "澳大利亚", "children": [ { "id": "44", "name": "澳大利亚", "children": [] } ] }, { "id": "48", "name": "英国", "children": [ { "id": "49", "name": "伦敦", "children": [] } ] } ] } ], }2.上面json数据通过可以通过ajax从后台数据提取组装，也可以js定义(不建议)，或者存为一个json文件。下面是页面的html代码和js代码：页面只需要一个div即可：
<div class="category"> </div>js代码: function createSelect(cityData) { if (cityData.length < 1) { return } var sele = document.createElement("select"); sele.className = 'form-control'; sele.add(new Option("-请选择-", -1)); for (var i = 0; i < cityData.length; i++) { sele.add(new Option(cityData[i].name, cityData[i].id)); } sele.onchange = function() { while (this != this.parentNode.lastChild) { this.parentNode.removeChild(this.parentNode.lastChild); } var i = this.selectedIndex; var cate = cityData[i - 1]; if (i != 0 && cate.children) { createSelect(cate.children); // 递归调用 } }; $(".category").get(0).appendChild(sele); };下面是项目中的一个从后台通过mybatis获取数据然后封装json的过程源码：
<resultMap id="RESULT_CASCADE_DESTINATION" class="com.ytr.trip.viewobject.CascadeDestinationVO" > <result property="id" column="dest_id" javaType="java.lang.String" jdbcType="VARCHAR" /> <result property="name" column="dest_name" javaType="java.lang.String" jdbcType="VARCHAR" /> <result property="children" column="dest_id" select="destination.GET_CHILDREN_LIST"/><!-- 获取子节点 --> </resultMap> <select id="GET-CASCADE_DESTINATION-LIST" resultMap="RESULT_CASCADE_DESTINATION"> <![CDATA[ SELECT * FROM destination dr WHERE dr.level = 1 and team_id = #value# ]]> </select> <select id="GET_CHILDREN_LIST" resultMap="RESULT_CASCADE_DESTINATION"> <![CDATA[ SELECT * FROM destination dr WHERE dr.parent_id = #value# ]]> </select> Dao层调用: public List<CascadeDestinationVO> getCascadeDestinationList(Long teamId) { return getSqlMapClientTemplate().queryForList("destination.GET-CASCADE_DESTINATION-LIST", teamId); }//此处提示业务需要，传入了参数获取的的list集合通过com.alibaba.fastjson;转成json即可.