S2SH+JQuery ztree生成三级级联树形列表菜单

合集下载

三级级联下拉菜单的实现流程

三级级联下拉菜单的实现流程下载温馨提示:该文档是我店铺精心编制而成，希望大家下载以后，能够帮助大家解决实际的问题。

文档下载后可定制随意修改，请根据实际需要进行相应的调整和使用，谢谢!并且，本店铺为大家提供各种各样类型的实用资料，如教育随笔、日记赏析、句子摘抄、古诗大全、经典美文、话题作文、工作总结、词语解析、文案摘录、其他资料等等，如想了解不同资料格式和写法，敬请关注!Download tips: This document is carefully compiled by theeditor. I hope that after you download them,they can help yousolve practical problems. The document can be customized andmodified after downloading,please adjust and use it according toactual needs, thank you!In addition, our shop provides you with various types ofpractical materials,such as educational essays, diaryappreciation,sentence excerpts,ancient poems,classic articles,topic composition,work summary,word parsing,copy excerpts,other materials and so on,want to know different data formats andwriting methods,please pay attention!1. 设计 HTML 结构创建三个下拉菜单，分别用于选择一级、二级和三级选项。

基于jquery实现三级下拉菜单

基于jquery实现三级下拉菜单本⽂实例为⼤家分享了jquery三级下拉菜单的具体实现代码，供⼤家参考，具体内容如下在写这个的时候，⾸先要捋顺思路。

点⼀个菜单的时候，其他的要闭合，点⼀级菜单的时候，⼆三级菜单要闭合，等等。

⼤致代码如下：<body><aside><ul class="one"><li> <a href="#" class="a">⽬录A</a><ul class="two" style="display: none"><li><a href="#" class="a">⼆级⽬录A</a><ul class="three" style="display: none"><li><a href="#">三级⽬录A</a></li></ul></li><li><a href="#" class="a">⼆级⽬录B</a></li><li><a href="#" class="a">⼆级⽬录C</a></li></ul></li><li> <a href="#" class="a">⽬录B</a><ul class="two" style="display: none"><li><a href="#" class="a">⼆级⽬录A</a><ul class="three" style="display: none"><li><a href="#">三级⽬录A</a></li></ul></li><li><a href="#" class="a">⼆级⽬录B</a></li><li><a href="#" class="a">⼆级⽬录C</a></li></ul></li><li> <a href="#" class="a">⽬录C</a> </li></ul></aside>//jQuery部分<script src="js/jquery-1.8.3.min.js"></script><script>$(document).ready(function() {$('.a').click(function() {if ($(this).siblings('ul').css('display') == 'none') {$(this).siblings('ul').slideDown(100).children('li');if ($(this).parents('li').siblings('li').children('ul').css('display') == 'block') {$(this).parents('li').siblings('li').children('ul').slideUp(100);}} else {//控制⾃⾝菜单下⼦菜单隐藏$(this).siblings('ul').slideUp(100);//控制⾃⾝菜单下⼦菜单隐藏$(this).siblings('ul').children('li').children('ul').slideUp(100);}});});</script></body>。

三级级联下拉菜单的实现流程

三级级联下拉菜单的实现流程1.首先，我们需要在页面上创建三个下拉菜单元素。

First, we need to create three drop-down menu elements on the page.2.然后，我们要填充第一个下拉菜单，以显示第一级的选项。

Then, we will populate the first drop-down menu to display the options for the first level.3.接着，我们需要为第一个下拉菜单添加一个事件监听器，以便在选择其中一个选项时触发下一个菜单的更新。

Next, we need to add an event listener to the first drop-down menu, so that selecting an option triggers an update to the next menu.4.然后，我们将填充第二个下拉菜单，以显示第二级的选项。

Then, we will populate the second drop-down menu to display the options for the second level.5.接下来，我们需要为第二个下拉菜单添加事件监听器，以便在选择其中一个选项时触发第三个菜单的更新。

After that, we need to add an event listener to thesecond drop-down menu, so that selecting an option triggersan update to the third menu.6.然后，我们将填充第三个下拉菜单，以显示第三级的选项。

Next, we will populate the third drop-down menu todisplay the options for the third level.7.最后，当用户选择完最后一级的选项后，我们可以获取所选择的值并进行相应的处理。

[应用]Jquery动态生成树形列表

Jquery动态生成树形列表实现思路：使用ajax方式发送请求→服务端从数据库中取出结构列表，生成xml文档，回发给客户端→客户端接收到xml数据，进行解析，生成列表，并配置列表样式。

客户端代码：function GetTreeView(odiv) {//odiv为要加载树形控件的div$.ajax({async: false,type: "GET",url: "../Page_Ajax/RS_TreeView.aspx",dataType: "xml",success: function(xmldata) {//新建列表项var ou = $("<ul></ul>").appendTo(odiv);//*//获取factory节点var f = $(xmldata).find("Factory:first");var lfactory = $("<li></li>").appendTo(ou);var dfactory = $("<div></div>").appendTo(lfactory);var ifactory = $("<img src=''/>").appendTo(dfactory);var ifactory2 = $("<img src=''/>").appendTo(dfactory);var sfactory = $("<span></span>").appendTo(dfactory);//设置节点属性$(sfactory).attr("id", $(f).attr("id"));$(sfactory).text($(f).attr("name"));$(dfactory).width($(sfactory).text().length * 15 + 35);//根据数据长度计算div宽度$(sfactory).bind("click", function() {//绑定点击事件});var ufactory = $("<ul></ul>").appendTo(lfactory);//遍历Area节点$(f).find("Area").each(function() {var larea = $("<li></li>").appendTo(ufactory);var darea = $("<div></div>").appendTo(larea);var iarea = $("<img src=''/>").appendTo(darea);var iarea2 = $("<img src=''/>").appendTo(darea);var sarea = $("<span></span>").appendTo(darea);$(sarea).attr("id", $(this).attr("id"));$(sarea).text($(this).attr("name"));$(darea).width($(sarea).text().length * 15 + 35);$(sarea).bind("click", function() {});var uarea = $("<ul></ul>").appendTo(larea);//遍历Team节点$(this).find("Team").each(function() {var lteam = $("<li></li>").appendTo(uarea);var dteam = $("<div></div>").appendTo(lteam);var iteam = $("<img src=''/>").appendTo(dteam);var iteam2 = $("<img src=''/>").appendTo(dteam);var steam = $("<span></span>").appendTo(dteam);$(steam).attr("id", $(this).attr("id"));$(steam).text($(this).attr("name"));$(dteam).width($(steam).text().length * 15 + 35);//绑定单击事件$(steam).bind("click", function() {});var uteam = $("<ul></ul>").appendTo(lteam);//遍历Well节点$(this).find("Well").each(function() {var lwell = $("<li></li>").appendTo(uteam);var dwell = $("<div></div>").appendTo(lwell);var iwell = $("<imgsrc='../Img/treeico/37.png'/>").appendTo(dwell);var swell = $("<span></span>").appendTo(dwell); $(swell).attr("id", $(this).attr("id"));$(swell).text($(this).attr("name"));$(dwell).width($(swell).text().length * 15 + 35);$(swell).bind("click", function() {});});});});//设置样式ou.css("padding-left", "15px");ou.css("margin", "0px");ou.css("margin-top", "3px");var ul = $(ou).find("ul");var li = $(ou).find("li");ul.css("padding-left", "20px");ul.css("padding-top", "5px");ul.css("margin-left", "0px");li.css("margin-left", "0px");li.css("list-style-type", "none");li.css("cursor", "pointer");ou.find("li:has(ul)").find("span").css("font-family", "微软雅黑").css("font-size", "14px");ou.find("li:has(ul)").find("span").hover(function() {$(this).css("color", "#0000ff").css('text-decoration', 'underline');},function() {$(this).css("background-color", "#ffffff").css("color","#000000").css('text-decoration', 'none');});//默认各节点展开，设置图片ou.find("li:has(ul)").find("div img:first").attr("src","../Img/treeico/minus.gif").css('');ou.find("li:has(ul)").find("div img:nth-child(2)").attr("src","../Img/treeico/Open.png");//设置展开收缩事件li.find("ul").prev().find('img').click(function() {$(this).parent().next().toggle();if ($(this).attr("src") == "../Img/treeico/minus.gif") {$(this).attr("src", "../Img/treeico/plus.gif");$(this).next().attr("src", "../Img/treeico/folder.png");}else if ($(this).attr("src") == "../Img/treeico/plus.gif") {$(this).attr("src", "../Img/treeico/minus.gif");$(this).next().attr("src", "../Img/treeico/Open.png");}else if ($(this).attr("src") == "../Img/treeico/Open.png") { $(this).prev().attr("src", "../Img/treeico/plus.gif");$(this).attr("src", "../Img/treeico/folder.png");}else if ($(this).attr("src") == "../Img/treeico/folder.png") { $(this).prev().attr("src", "../Img/treeico/minus.gif");$(this).attr("src", "../Img/treeico/Open.png");}});}});}服务器端代码（RS_TreeView.aspx）：protected void Page_Load(object sender, EventArgs e){XmlDocument xmlDoc = new XmlDocument();XmlElement eRoot = xmlDoc.CreateElement("Factory");eRoot.SetAttribute("id", "factory");eRoot.SetAttribute("name", "采油厂");xmlDoc.AppendChild(eRoot);Factory f = new Factory();f.GetAreaList();foreach (Area a in f.AreaList){XmlElement eArea = xmlDoc.CreateElement("Area");eArea.SetAttribute("id", a.ID);eArea.SetAttribute("name", );eRoot.AppendChild(eArea);a.GetTeamList();foreach (Team t in a.TeamList){XmlElement eTeam = xmlDoc.CreateElement("Team");eTeam.SetAttribute("id", t.ID);eTeam.SetAttribute("name", );eArea.AppendChild(eTeam);t.GetWellList();foreach (Node w in t.WellList){XmlElement eWell = xmlDoc.CreateElement("Well");eWell.SetAttribute("id",w.ID.ToString());eWell.SetAttribute("name",);eTeam.AppendChild(eWell);}}}ResponseXML(xmlDoc.OuterXml);}private void ResponseXML(string xml){Response.ContentType = "text/xml";Response.Charset = "utf-8";Response.Clear();Response.Write("<?xml version=\"1.0\" encoding=\"utf-8\"?>");Response.Write(xml);Response.End();}其中：Factory等是自定义的类，GetAreaList等方法是类中自定义的方法，生成xml文档的代码，可以自行编写。

S2SH+JQuery ztree生成三级级联树形列表菜单

S2SH+JQuery ztree生成三级级联树形列表菜单1.LoadZTreeAction.javapublic LoadZTreeAction() extends ActionSupport{private static final long serialVersionUID = 4258282097802772367L;private OneDAO oneDAO;private TwoDAO twoDAO;private ThreeDAO threeDAO;//Generate getters and setters//为了提高程序效率，先加载二级级联菜单，当点击子菜单时再动态添加下一级public String loadZTree(){JSONArray jsonArray = new JSONArray();JSONObject one = new JSONObject();JSONObject two = new JSONObject();List<One> listOne = oneDAO.findAll();for(One oTemp:listOne){int pID = -1;one.put("id",oTemp.getID());one.put("pID",pID);one.put("name",oTemp.getName());one.put("url","");one.put("target","rightFrame");jsonObject.add(one);List<Two> listTwo = twoDAO.findByOneId(oTemp.getID());for(Two tTemp : listTwo){two.put("id",tTemp.getID());two.put("pID",oTemp.getID());two.put("name",tTemp.getName());two.put("url","");two.put("target","rightFrame");jsonObject.add(two);}}return null;}public String loadSonTree(){HttpServletRequest request = ServletActionContext.getRequest();HttpServletResponse response = ServletActionContext.getResponse();response.setCharacterEncoding("utf-8");response.contentType("html/text");JSONArray jsonArray = new JSONArray();JSONObject obj = new JSONObject();String twoID = request.getParameter("twoID");List<Three> listThree = threeDAO.findByTwoId(twoID);for(Three thTemp : listThree){obj.put("id",thTemp.getID());obj.put("pId",twoID);obj.put("name",thTemp.getName());obj.put("url","");obj.put("target","rightFrame");jsonArray.add(obj);}try{PrintWriter out = response.getWriter();out.print(jsonArray);out.flush();out.close();}catch(IOException ioe){ioe.printStackTrace();}return null;}}2.struts.xml<package name="test" namespace="/json" extends="json-default"><action name="loadZTree" class="LoadZTreeListAction" method="loadZTree"></action> <action name="loadSonTree" class="LoadZTreeListAction"method="loadSonTree"></action></package>3.applicationContext.xml<bean name="loadZTreeListAction" class="com.action.LoadZTreeAction"><property name="oneDAO"><ref bean="OneDAO"></property><property name="TwoDAO"><ref bean="TwoDAO"></property><property name="ThreeDAO"><ref bean="ThreeDAO"></property></bean>4.test.jsvar setting = {async: {enable: true,url: "json/loadZTree.action",autoParam: ["id"]},asyncParamOther: [],expandSpeed: fast,data: {simpleData: {enable: true,idKey: "id",pIdKey: "pId",rootPid: "-2"}},callback: {onClick: treeNodeClick}};$(document).ready(function() {$.fn.zTree.init($("#treeDemo"), setting);});function treeNodeClick(event,treeId,treeNode){twoID = treeNode.id;var params = {"twoID": twoID};$.ajax({url: "json/loadSonTree.action",type: "post",dataType: "json",data: params,cache: false,error: function(e){e.getMessage();},success: function(jsonArray){var treeObj = $.fn.zTree.getZTreeObj("treeDemo");var newNodes = jsonarray;treeObj.addNodes(treeNode, newNodes);}});}5.test.jsp<link rel="stylesheet" href="css/zTreeStyle/myzTreeStyle.css" type="text/css"></link><script type="text/javascript" src="./js/jquery-1.8.2.js"></script><script type="text/javascript" src="js/jquery.ztree.core-3.4.js" charset="UTF-8"></script> <script type="text/javascript" src="js/test.js" charset="UTF-8"></script>...<body><div><ul id="treeDemo" class="ztree"></ul></div></body>。

jQuery实现多级列表（树形菜单）

jQuery实现多级列表（树形菜单）<style>ul{list-style:none;margin:0px;padding:0px;}ul li{margin-left:15px;}ul li a{display:block;height:30px;width:80px;line-height:30px;text-decoration:none;padding-left:15px;}.no{display:none;}.yes{display:block;}.page{background:url("../img/page.png") no-repeat left center;}.plus{background:url("../img/plus.png") no-repeat left center;}.minus{background:url("../img/minus.png") no-repeat left center;}</style><script type="text/javascript" src="../jq/jquery-1.12.4.js"></script><script>$(function(){$("li").each(function(){if($(this).children("ul").size()>0)//判断li下是否有ul列表{//如果有隐藏ul，添加样式$(this).children("ul").eq(0).css("display","none");$(this).children("a").first().addClass("plus");//点击⼀级列表$("a").click(function(){//判断ul是否隐藏if($(this).parent().children("ul").first().css("display")=="none"){$(this).parent().children("ul").first().css("display","block");$(this).removeClass();$(this).addClass("minus");}else{$(this).parent().children("ul").first().css("display","none");$(this).removeClass();$(this).addClass("plus");}})}else{$(this).children("a").eq(0).addClass("page");}})})</script></head><body><ul><li><a href="#">⼀级菜单1</a><ul><li><a href="#">⼀级菜单1</a><ul><li><a href="#">⼀级菜单1</a></li> <li><a href="#">⼀级菜单1</a></li> </ul></li><li><a href="#">⼀级菜单1</a></li> </ul></li><li><a href="#">⼀级菜单1</a><ul><li><a href="#">⼀级菜单1</a></li> <li><a href="#">⼀级菜单1</a></li> </ul></li></ul></body></html>。

jQuery实现简单三级联动效果

jQuery实现简单三级联动效果本⽂实例为⼤家分享了jQuery实现简单三级联动的具体代码，供⼤家参考，具体内容如下⾸先写⼀个JSON数据[{"province": "吉林省","cities": [{"city": "长春市","counties": ["朝阳区", "经济开发区", "⾼新区"]},{"city": "吉林市","counties": ["东城区", "经济开发区", "⽼城区"]},{"city": "⽩⼭市","counties": ["⼆道区", "河东区", "⾼新区"]}]},{"province": "辽宁省","cities": [{"city": "沈阳市","counties": ["朝阳区", "经济开发区", "⾼新区"]},{"city": "⼤连市","counties": ["东城区", "经济开发区", "⽼城区"]},{"city": "铁岭市","counties": ["⼆道区", "河东区", "⾼新区"]}]},{"province": "⼭东省","cities": [{"city": "青岛市","counties": ["朝阳区", "经济开发区", "⾼新区"]},{"city": "济南市","counties": ["东城区", "经济开发区", "⽼城区"]},{"city": "威海市","counties": ["⼆道区", "河东区", "⾼新区"]}]}]然后⽤Ajax动态获取JSON⽂件中的数据完整代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>三级联动</title></head><body><select id="province"><option value="">---</option></select><select id="city"><option value="">---</option></select><select id="county"><option value="">---</option></select><script src="js/jquery-1.12.4.js"></script><script src="../js/createXMLHttpRequest.js"></script><script>var $province = $("#province");var $city = $("#city");var $county = $("#county");var json;$.getJSON("data/server1.json", function (data) {// 把data保存到json全局变量中json = data;// 遍历data数据$.each(data, function (index, obj) {// 获取所有的省份信息var provinceName = obj.province;// console.log(provinceName);// 将省份信息添加到对应的select元素中$province.append(`<option value="${provinceName}">${provinceName}</option>`);});$province.change(function () {// 将城市下拉列表的选项清空$city.empty();$city.append(`<option value="">---</option>`);// 获取到所选择的城市的⽂本信息var provinceElementName = $(this).children("option:selected").text();// console.log(provinceElementName);$.each(json, function (index, obj) {var provinceName = obj.province;// console.log(provinceName);if (provinceElementName === provinceName) {// 获取到城市数组集合var cities = obj.cities;// 遍历城市数组集合$.each(cities, function (index, obj) {// console.log(obj.city);// 获取到城市名称var cityName = obj.city;// 将该省对应的城市名称添加到对应的select中$city.append(`<option value="${cityName}">${cityName}</option>`);});}});});$city.change(function () {// 将区级下拉列表的选项清空$county.empty();$county.append(`<option value="">---</option>`);// 获取到所选择的城市的⽂本信息var cityElementName = $(this).children("option:selected").text();// console.log(cityElementName);$.each(json, function (index, obj) {// 获取该省对应的所有的城市信息var cities = obj.cities;// console.log(cities);$.each(cities, function (index, cityObj) {// console.log(cityObj.city);var cityName = cityObj.city;if (cityElementName === cityName) {// 获取到区级数组集合// console.log(cityObj.counties);var counties = cityObj.counties;// 遍历区级数组集合$.each(counties, function (index, value) {// 获取到区级名称// console.log(value);// 将该城市对应的区级名称添加到对应的select元素中$county.append(`<option value="${value}">${value}</option>`);});}});});});});</script></body></html>效果如下以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

JQ三级联动的写法

JQ三级联动的写法今天和⼤家分享下三级联动的写法思路：1.通过AJAX获取到json⽂件⾥的数据,GET⽅法 2.在获取到的数据⾥找到省份添加到下拉菜单中 3.当省份标签被改变时change事件通过当前省份与市的共同数组下标找到对应的市区；实例：HTML<!DOCTYPE html><html><head><script src="js/jquery-3.3.1.js"></script><meta charset="UTF-8"><title></title></head><body><select id="province">//创建省份下拉菜单<option>--省份--</option></select><select id="city">//创建市下拉菜单<option>--市--</option></select><select id="code">//创建邮编下拉菜单<option>--邮编--</option></select></body></html> JQ 第⼀级联动省份<script>//----------------------------联动第⼀级-------------------------------------------------------$.get("js/city.json",function(data,status){//通过GET⽅法获取到json⽂件⾥的数据$(data.城市代码).each(function(i,el){ //通过JQ循环遍历数据var str = "<option value=" + i + ">" + data.城市代码[i].省 + "</option>"//把data的省份数据添加到下拉菜单中 $("#province").append(str);//添加option标签})})</script> 第⼆级联动市区：当省级下拉菜单被改变时触发change事件实现⼆级联动<script>$.get("js/city.json",function(data,status){//通过GET⽅法获取到json⽂件⾥的数据var provinceId = null;//纪录共同的数组下标值//----------------------------联动第⼀级-------------------------------------------------------$(data.城市代码).each(function(i,el){ //通过JQ循环遍历数据var str = "<option value=" + i + ">" + data.城市代码[i].省 + "</option>"//把data的省份数据添加到下拉菜单中 $("#province").append(str);//添加option标签});//----------------------------联动第⼆级-------------------------------------------------------$("#province").change(function(){//当省级下拉菜单被改变触发change事件$("#city").html("<option>--市--</option>");//当省级下拉菜单被改变时清空市级下拉菜单$("#code").html("<option>--邮编--</option>");//当省级下拉菜单被改变时清空邮编下拉菜单provinceId = $("#province").val();//获取到省和市的共同数组下标$(data.城市代码[provinceId].市).each(function(index,ele){//循环共同数组的市var str = "<option>" + ele.市名 + "</option>"//把data的市数据添加到下拉菜单中$("#city").append(str);//添加option标签})});</script> 第三级联动邮编：当市级级下拉菜单被改变时触发change事件实现三级联动<script>$.get("js/city.json",function(data,status){//通过GET⽅法获取到json⽂件⾥的数据var provinceId = null;//纪录共同的数组下标值//----------------------------联动第⼀级-------------------------------------------------------$(data.城市代码).each(function(i,el){ //通过JQ循环遍历数据var str = "<option value=" + i + ">" + data.城市代码[i].省 + "</option>"//把data的省份数据添加到下拉菜单中 $("#province").append(str);//添加option标签});//----------------------------联动第⼆级-------------------------------------------------------$("#province").change(function(){//当省级下拉菜单被改变触发change事件$("#city").html("<option>--市--</option>");//当省级下拉菜单被改变时清空市级下拉菜单$("#code").html("<option>--邮编--</option>");//当省级下拉菜单被改变时清空邮编下拉菜单provinceId = $("#province").val();//获取到省和市的共同数组下标$(data.城市代码[provinceId].市).each(function(index,ele){//循环共同数组的市var str = "<option>" + ele.市名 + "</option>"//把data的市数据添加到下拉菜单中$("#city").append(str);//添加option标签})});//----------------------------联动第三级-------------------------------------------------------$("#city").change(function(){$("#code").html("");$(data.城市代码[provinceId].市).each(function(index,ele){if($("#city").val()==ele.市名){console.log(ele.编码);var str = "<option>" + ele.编码 + "</option>"//把data的省份数据添加到下拉菜单中$("#code").append(str);//添加option标签}})})})</script>。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。