//js-多級聯動選擇標籤demo,頁面:<div name="tagParentId0"></div> //設置標籤html,標籤格式[{TagId,Title,Content,ParentTagId,ChildList}] var TagsSet = function (data) { var rootSpan = $("[name='tagParentId0']"); for (var i = 0; i < data.length; i++) { var x = data[i]; var html = '<div class="form-group"><label class="control-label col-md-2 col-sm-2 col-xs-2">'+x.Title+':</label><div>'; html += TagGetHtml(x); html += "</div></div>"; rootSpan.append(html); } //綁定下拉選擇框改變事件 $("[name='tagSelect']").bind("change", ShowTags); } //獲取標籤html內容 var TagGetHtml = function (e) { if (e && e.ChildList && e.ChildList.length > 0) { var html = '<span name="tag' + e.TagId + '" ' + (e.ParentTagId == 0 ? '' : 'style="display: none;"') + '>'; html += '<select name="tagSelect" class="form-control addtag" onchange="ShowTags">'; for (var i = 0; i < e.ChildList.length; i++) { var x = e.ChildList[i]; //json中是雙引號,所以value等號後爲單引號纔行 html += "<option value='" + JSON.stringify(x) + "'>" + x.Title + "</option>"; } html += "</select>"; for (var i = 0; i < e.ChildList.length; i++) { var x = e.ChildList[i]; html += TagGetHtml(x); } html += "</span>"; return html; } else { return ""; } } //選擇框改變事件,顯示子級或執行選中業務 var ShowTags = function () { console.log($(this)); var e = $(this).children("option:selected").val(); //值是對象字符串 if (e.indexOf("{") == 0) { var v = JSON.parse(e); if (v.ChildList && v.ChildList.length > 0) { //顯示子級 $(this).parent().children("span").hide(); $("[name='tag" + v.TagId + "']").show(); } else { //執行選中業務 AddCopy(v.Content); } } else { //執行選中業務 AddCopy(v); } } //選擇框選中後執行業務 var AddCopy = function (v) { if (v) { console.log(v); } } //test var test=function(){ var data=[{"ChildList":[{"ChildList":[{"ChildList":[{"ChildList":null,"TagId":19,"Title":"c1c1c1c1","Content":"c1c1c1c1","Type":0,"Sort":1,"ParentTagId":13},{"ChildList":null,"TagId":20,"Title":"c1c1c1c2","Content":"c1c1c1c2","Type":0,"Sort":2,"ParentTagId":13}],"TagId":13,"Title":"c1c1c1","Content":"c1c1c1","Type":0,"Sort":1,"ParentTagId":2},{"ChildList":[{"ChildList":null,"TagId":21,"Title":"c1c1c2c1","Content":"c1c1c2c1","Type":0,"Sort":1,"ParentTagId":14}],"TagId":14,"Title":"c1c1c2","Content":"c1c1c2","Type":0,"Sort":2,"ParentTagId":2}],"TagId":2,"Title":"測試標籤1子級1","Content":"c1c1","Type":0,"Sort":1,"ParentTagId":1},{"ChildList":[{"ChildList":[{"ChildList":null,"TagId":22,"Title":"c1c2c1c1","Content":"c1c2c1c1","Type":0,"Sort":1,"ParentTagId":15}],"TagId":15,"Title":"c1c2c1","Content":"c1c2c1","Type":0,"Sort":1,"ParentTagId":3},{"ChildList":[{"ChildList":null,"TagId":17,"Title":"c1c2c2c1","Content":"c1c2c2c1","Type":0,"Sort":1,"ParentTagId":16},{"ChildList":null,"TagId":18,"Title":"c1c2c2c2","Content":"c1c2c2c2","Type":0,"Sort":2,"ParentTagId":16}],"TagId":16,"Title":"c1c2c2","Content":"c1c2c2","Type":0,"Sort":2,"ParentTagId":3}],"TagId":3,"Title":"測試標籤1的2","Content":"c1c2","Type":0,"Sort":2,"ParentTagId":1},{"ChildList":null,"TagId":4,"Title":"c1c3","Content":"c1c3d","Type":0,"Sort":3,"ParentTagId":1},{"ChildList":null,"TagId":5,"Title":"c1c4","Content":"c1c4d","Type":0,"Sort":4,"ParentTagId":1},{"ChildList":null,"TagId":12,"Title":"c1c5","Content":"c1c5","Type":0,"Sort":5,"ParentTagId":1}],"TagId":1,"Title":"檢測標籤1","Content":"c1c1","Type":0,"Sort":1,"ParentTagId":0},{"ChildList":[{"ChildList":null,"TagId":11,"Title":"123","Content":"","Type":0,"Sort":1,"ParentTagId":8},{"ChildList":null,"TagId":9,"Title":"ALEX測試","Content":"測試測試測試測試測試測試車測試測試菜市場","Type":0,"Sort":2,"ParentTagId":8}],"TagId":8,"Title":"標籤做什麼用","Content":"","Type":0,"Sort":1,"ParentTagId":0},{"ChildList":null,"TagId":10,"Title":"信息新增","Content":"測試測試測試測試測試車","Type":0,"Sort":1,"ParentTagId":0},{"ChildList":[{"ChildList":null,"TagId":7,"Title":"c2c2","Content":"c2c2","Type":0,"Sort":1,"ParentTagId":6}],"TagId":6,"Title":"c2c0","Content":"c2c0d","Type":0,"Sort":2,"ParentTagId":0}]; TagsSet(data); }