HTMLパーツ
<！doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title>マルチレベルリンケージエンカプザル</title> <link href = "./ css/bootstrap.cs" rel = "styleSheet"> <script src = " src = "./ duoji.js"> </script> <body> <div style = "margin：100px auto;"> <div id = "box1"> </div> <div style = "margin：100px auto;"> <div> "box2"> </div> </div> name）$。select（ 'box1'、 'area1'）; $。select（ 'box2'、 'area2'）; </script> </body> </html>
duoji.jsコード
（function（$）{$）{$ .select = function（box、addinputclass）{var i = new select; return i.init（box、addinputclass）} //マルチレベルのリンケージメソッドclass var select = new function（）; select.prototype = {// class属性init：box = '+box = box; //要素を追加する必要があるコンテナeleclass = addinputclass; //各イベントの場所classthis.first（）; // first：function（）{// external variable var boxname = this.boxname; var eleclass = this.eleclass; var box = this box; var box; var box; var boxlass; obj = this; $。get（ "http://127.0.0.1:83/areas"、{id： '0'}、function（data）{var option = "<option value = ''> 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> '） boxName = $（event）.attr（ 'pnode'）; num = eleclass.index（$（event））+1; //console.log(thsthis).attr(num') );//console.log( $..ttr('num')）; if（its).ttr('num').trum').attr( num')）（（ ent（）。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.0.1:83/areas"、data：{id：id}、sync：false、// synchronous success：fanction（data）{// console.log（data）; = data.dataif（data.state === '1'）{var option = "<option値= ''> </option>"; for（var key in list）{option+= "<option value = '"+key+"'>"+list [key] .areaname+"</option>";} pnode = "'+boxName+'" "cname =" '+className+' "> '+option+' </select> </div> '）。 boxName = $（event）.attr（ 'pnode'）; console.log（ "container name："+boxName+"/nトリガークラス名："+className）;}、//最初の選択ボックスは情報を取得します。 {id： '0'}、function（data）{var option = "<option value = ''> bar list = data.data; for（var key in list）{option+=" <option value = '"+key+"'> "+list [key] .arename+" </option> ";} main.html（option）;}、 'jsonp'）;}}}）（jQuery）バックエンドで提供されるデータ型：JSON
データがある場合：state = 1
例：
データ：{110000：{id： "110000"、areaname： "beijing"、pid： "0"、shortname： "beijing"、level： "1"、position： "tr_0"、sort： "} 120000：{id：" 120000 "、areaname：" "" "" "" ""位置： "TR_0"、sort： "2"} 130000：{id： "130000"、areaname： "hebei省"、pid： "0"、shortname： "hebei"、level： "1"、 "tr_0"、sort： "3"} 140000：{id： "" shamxi： "" "" 3 "：" 140000 "、" 140000 "、 "shanxi"、level： "1"、position： "tr_0"、sort： "4"} 150000：{id： "150000"、areaname： "Inner Mongolia Autonomous Region"、Pid： "0"、shortname： "Inner Mongolia"、Level： "1"、 "TR_0" 「リアオン州」、PID： "0"、shortname： "liaoning"、level： "1"、position： "tr_0"、sort： "6"} 220000：{id： "2200000"、areaname： "jilin province"、pid： "0"、shortname： "jilin"、 "1" 1 "、" tr_0 "、 "7"} 230000：{id： "230000"、areaname： "heilongjiang province"、pid： "0"、shortname： "heilongjiang"、level： "1"、position： "tr_0"、sort： "8"} 310000：{id： "310000"、aneaname： "shanghai" "" " "1"、position： "tr_0"、sort： "9"} 320000：{id： "320000"、areaname： "jiangsu省"、pid： "0"、shiangsu "、level：" 1 "、position：" tr_0 "、sort：" 10 "} 330000：" 330000： "330000"、州 "、pid：" 0 "、shortname：" zhejiang "、level：" 1 "、position：" tr_0 "、sort：" 11 "} ......}、state：" 1 "データがない場合= 0
例：
状態：「0」