HTML part
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>Multi-level linkage encapsulation</title><link href="./css/bootstrap.css" rel="stylesheet"><script src="./js/jquery.js"></script><script src="./duoji.js"></script><body><div style="margin:100px auto;"><div id="box1"></div> </div><div style="margin:100px auto;"><div> id="box2"></div> </div><script>//Container name, name name (newly generated class name)$.select('box1','area1');$.select('box2','area2');</script></body></html>duoji.js code
(function ($) {$.select=function(box,addInputClass){var i=new select;return i.init(box,addInputClass)}//Declare the multi-level linkage method class var select = new Function();select.prototype={//Define the class attribute init:function(box,addInputClass){this.boxName=box;this.box=$('#'+box); //Container that needs to add elements this.eleClass=addInputClass;//Location of each event classthis.first();//Create a new select to get}, first:function(){//Declare the external variable var boxName=this.boxName;var eleClass= this.eleClass;var box=this.box;var obj=this;$.get("http://127.0.0.1:83/areas", {id:'0'},function(data){var option="<option value=''>Please select</option>";var list=data.data;for(var key in list){option+="<option value='"+key+"'>"+list[key].arename+"</option>";}$('<div><select name="'+eleClass+'[]" num="0" pnode="'+boxName+'" cname="'+eleClass+'">'+option+'</select></div>').appendTo(box).find('select').bind('change',function(){obj.change($(this))});},'jsonp');},//change event change:function(event){//Declare var boxName=$(event).attr('pnode'); //Get the pnode var className=$(event).attr('cname');//Get the cnamevar box of the trigger event =$("#"+boxName); //Get all objects inserted into the box var eleClass=$("."+className); //Get all element groups where Classes are var num=eleClass.index($(event))+1; //Get the value of num var id=$(event).val(); //Get the header of ajax sending id var obj=this; //Represent this method//Clear the new element added later eleClass.each(function(){//This here represents eleClass single object during traversal //console.log($(this).attr('num'));//console.log($().attr('num'));if($(this).attr('num')>$(event).attr('num')){$(this).parent().remove();}});/*console.log(boxName);console.log(className);console.log($(event));console.log($(event).val());*///loop ajax method $.ajax({type: "get",dataType:"jsonp",url: "http://127.0.0.1:83/areas",data: {id:id},sync: false,//Set to synchronous success: function(data){//console.log(data);var list =data.dataif(data.state==='1'){var option="<option value=''>Please select </option>";for(var key in list){option+="<option value='"+key+"'>"+list[key].areaname+"</option>";}$('<div><select name="'+className+'[]" num="'+num+'" pnode="'+boxName+'"" cname="'+className+'" >'+option+'</select></div>').appendTo(box).find('select').bind('change',function(){obj.change(this)});}}});});},//Query the information in the current box log:function(){var boxName=$(event).attr('pnode'); //Get the pnode of the trigger event var className=$(event).attr('cname');//Get the cnamevar box of the trigger event =$("#"+boxName); //Get all objects inserted into the box var eleClass=$("."+className); //Get the element group console.log("Container name:"+boxName+"/n triggered class name:"+className);},//The first select box gets the information getFirstElement:function(){var main=$('#'+this.main);$.get("http://127.0.0.1:83/areas", {id:'0'},function(data){var option="<option value=''>Please select </option>";var list=data.data;for(var key in list){option+="<option value='"+key+"'>"+list[key].arename+"</option>";}main.html(option);},'jsonp');}}})(jQuery)Data type provided by the backend: json
If there is data: state=1
example:
data:{110000:{id: "110000", areaname: "Beijing", pid: "0", shortname: "Beijing", level: "1", position: "tr_0", sort: "1"}120000:{id: "120000", areaname: "Tianjin", pid: "0", shortname: "Tianjin", level: "1", position: "tr_0", sort: "2"}130000:{id: "130000", areaname: "Hebei Province", pid: "0", shortname: "Hebei", level: "1", position: "tr_0", sort: "3"}140000:{id: "140000", areaname: "Shanxi Province", pid: "0", shortname: "Shanxi", level: "1", position: "tr_0", sort: "4"}150000:{id: "150000", areaname: "Inner Mongolia Autonomous Region", pid: "0", shortname: "Inner Mongolia", level: "1", position: "tr_0", sort: "5"}210000:{id: "210000", areaname: "Liaoning Province", pid: "0", shortname: "Liaoning", level: "1", position: "tr_0", sort: "6"}220000:{id: "2200000", areaname: "Jilin Province", pid: "0", shortname: "Jilin", level: "1", position: "tr_0", sort: "7"}230000:{id: "230000", areaname: "Heilongjiang Province", pid: "0", shortname: "Heilongjiang", level: "1", position: "tr_0", sort: "8"}310000:{id: "310000", areaname: "Shanghai", pid: "0", shortname: "Shanghai", level: "1", position: "tr_0", sort: "9"}320000:{id: "320000", areaname: "Jiangsu Province", pid: "0", shortname: "Jiangsu", level: "1", position: "tr_0", sort: "10"}330000:{id: "330000", areaname: "Zhejiang Province", pid: "0", shortname: "Zhejiang", level: "1", position: "tr_0", sort: "11"}......},state:"1"If there is no data state=0
example:
state:"0"