// 树状选择器 //结构 var json = { '常州饲料厂': { '生产饲料部': null, '物流部':null }, '扬州饲料厂': { '生产饲料部': null, '物流部':null }, '无锡饲料厂': { '生产饲料部': null, '物流部':null }, '泰州饲料厂': { '生产饲料部': null, '物流部':null }, '苏州饲料厂': { '生产饲料部': null, '物流部':null }, }; //这里生成DOM function generate(json, par) { for (var attr in json) { var ele = document.createElement('li'); if (!json[attr]) ele.innerHTML = ' <input type="checkbox"></input>' + attr; else { ele.innerHTML = '<span><span class="switch-open" onclick="toggle(this)"></span><input type="checkbox" onclick="checkChange(this)"></input>' + attr + '</span>'; var nextpar = document.createElement('ul'); ele.appendChild(nextpar); generate(json[attr], nextpar); } par.appendChild(ele); } } generate(json, document.getElementById('container')); //处理展开和收起 function toggle(eve) { var par = eve.parentNode.nextElementSibling; if (par.style.display == 'none') { par.style.display = 'block'; eve.className = 'switch-open'; } else { par.style.display = 'none'; eve.className = 'switch-close'; } } //处理全部勾选和全部不选 function checkChange(eve) { var oul = eve.parentNode.nextElementSibling; if (eve.checked) { for (var i = 0; i < oul.querySelectorAll('input').length; i++) { oul.querySelectorAll('input')[i].checked = true; } } else { for (var i = 0; i < oul.querySelectorAll('input').length; i++) { oul.querySelectorAll('input')[i].checked = false; } } }

这段代码是一个树状选择器的实现。它使用一个 JSON 对象来表示树的结构，然后通过递归生成对应的 DOM 元素。每个节点都可以展开或收起，并且可以选择或取消选择。

在 `generate` 函数中，通过遍历 JSON 对象的属性来生成对应的 DOM 元素。如果属性的值为 `null`，则生成一个包含复选框和文本的 `li` 元素；如果属性的值不为 `null`，则生成一个包含展开/收起按钮、复选框和文本的 `li` 元素，并递归调用 `generate` 函数生成下一级的 DOM 元素。

在 `toggle` 函数中，通过切换子元素列表的显示状态和切换按钮的样式来实现展开和收起功能。

在 `checkChange` 函数中，根据复选框的状态来选择或取消选择所有子元素的复选框。

这样，通过调用 `generate` 函数，可以将 JSON 数据转换为对应的树状选择器的 DOM 结构，并且可以通过展开/收起按钮和复选框进行交互操作。