$("#select")
.selectZTree({
data: zNodes,
width: 150,
hasSearch: true,
closeOnSelect: false,
placeholder: "下来选中",
onOpen: function (ele) {
console.log(ele)
console.log("open")
},
onClose: function (ele) {
console.log(ele)
console.log("onClose")
},
onSelected: function (ele, val) {
console.log(ele)
console.log(val)
console.log("onSelected")
}
})
.on("change", function (e, data) {
console.log(e);
console.log(data)
console.log($(this).val())
});
$("#select2")
.selectZTree({data: zNodes})
.on("change", function (e, data) {
console.log(e);
console.log(data)
console.log($(this).val())
});
var zNodes = [
{id: 1, pId: 0, name: "父1 - 展开", open: true},
{id: 11, pId: 1, name: "父11 - 折叠"},
{id: 111, pId: 11, name: "叶子节点节点节点111"},
{id: 113, pId: 11, name: "叶子节点节点节点113"},
{id: 1131, pId: 113, name: "叶子节点节点节点1131"},
{id: 1132, pId: 113, name: "叶子节点节点节点1132"},
{id: 1133, pId: 113, name: "叶子节点节点节点1133"},
{id: 114, pId: 11, name: "叶子节点节点节点114"},
{id: 12, pId: 1, name: "父12 - 折叠"},
{id: 121, pId: 12, name: "叶子节点节点节点121"},
...
];
//直接使用节点渲染
<select id="select3" title="选择">
<option value="1">值1</option>
<option value="2">值2</option>
<optgroup label="组1">
<option value="11">值11</option>
<option value="21">值21</option>
</optgroup>
<optgroup label="组1-1">
<option value="111">值111</option>
<option value="211">值211</option>
</optgroup>
</select>
//受原始select限制,只能2级分组,更多级分组使用数据配置方式
$("#select3").selectZTree()
.on("change", function (e, data) {
console.log(e);
console.log(data)
console.log($(this).val())
});