$("#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())
    });