x-tree-select (tree select) - Demo

Default json datatree

datatree json 


var defJson = [{
    title: 'text1',
    value: 'x1',
    child: []
}, {
    title: 'text2',
    value: 2,
},
    {
        title: 'text3',
        value: 3,
        child: [
            {
                title: 'lv2 text3',
                value: 'x99',
                child: []
            },
            {
                title: 'lv2 text4',
                value: 4,
                child: [
                    {
                        title: 'lv3 text3',
                        value: 3,
                        child: []
                    },
                    {
                        title: 'lv3 text4',
                        value: 4,
                        child: []
                    },
                    {
                        title: 'lv3 text5',
                        value: 5,
                        child: []
                    },
                ]
            },
            {
                title: 'lv2 text5',
                value: 5,
                child: []
            }
        ]
    },
    {
        title: 'text4',
        value: 4,
        child: []
    },
    {
        title: 'text5',
        value: 5,
        child: []
    },
];

Usual sample & with form stackable

Show souce code

HTML 


<form method="get" action="">
    <div style="width: 50%;margin: 50px auto;">
        <input type="text" nname="myname" required  id="test" placeholder="plz select"/>
    </div>
    <input type="submit" value="send"/>
</form>

Javascript 


$("#test").treeSelect({
    datatree: defJson
});

Right to left & custom title



Show souce code

HTML 


<input type="text" id="demo2" placeholder="Pleasem choose an item"/>

Javascript 


$("#demo2").treeSelect({
    mainTitle: 'سرفصل های اصلی',
    direction: 'rtl',
    datatree: defJson
});

Selectable parent & slide transtion with default value



Show souce code

HTML 


<input type="text" id="demo3" placeholder="Pleasem choose an item"/>

Javascript 


$("#demo3").treeSelect({
    transition: 'slide',
    selectablePrernt: true,
    datatree: defJson
});

Events demo without transtion & searchable


For watch events result open browser console




Show souce code

HTML 


<input type="text" id="demo4" placeholder="Pleasem choose an item"/>

Javascript 


$("#demo4").treeSelect({
    datatree: defJson,
    transition: 'none',
    searchable: true,
    onOpen: function () {
        console.log('onOpen event triggered');
    }, onClose: function () {
        console.log('onClose event triggered');
    }, OnSelect: function (sel) {
        console.log('onSelect event triggered secleted : ');
        console.log(sel);
    }, OnChange: function (oldv, newv) {
        console.log('OnChange event triggered old: ', oldv, 'new:', newv);
    }
});

Custom json



Show souce code

HTML 


<input type="text" id="demo5" placeholder="Pleasem choose an item"/>

Javascript 


$("#demo5").treeSelect({
    json: {
        title: 't',
        value: 'v',
        child: 'c'
    },
    datatree: [{
        t: '*** text1',
        v: 1,
        c: []
    }, {
        t: '*** text2',
        v: 2,
        c: []
    },
        {
            t: '*** text3',
            v: 3,
            c: [
                {
                    t: '*** lv2 text3',
                    v: 3,
                    c: []
                },
                {
                    t: '*** lv2 text4',
                    v: 4,
                    c: [
                        {
                            t: '*** lv3 text3',
                            v: 3,
                            c: []
                        },
                        {
                            t: '*** lv3 text4',
                            v: 4,
                        },
                        {
                            t: '*** lv3 text5',
                            v: 5,
                            c: []
                        },
                    ]
                },
                {
                    t: '*** lv2 text5',
                    v: 5,
                    c: []
                }
            ]
        },
        {
            t: '*** text4',
            v: 4,
            c: []
        },
        {
            t: '*** text5',
            v: 5,
            c: []
        },
    ]
});