JQuery TreeView Example And Stylish Select DropDown

Create TreeView example: Here container is the boundary within tree dropdown will contains. If you open this tree view in popup, container will be popup body.

var tree = $("div.tree-inside-this-div").treeView({ json: r, openAll: 0, noText: "Select...", change: function (value) { console.log(value); }, value: "1.1.2.2.3.2", container: $(document.body) });

To set specific value or to select desired tree node:

tree.value("100");

You can put a attribute named "selected": true to auto select node when create tree.

"children": [ { "id": "1.1.2.2.3.2.4.1", "text": "Label - 4.1", "selected": true }, { "id": "1.1.2.2.3.2.4.2", "text": "Label - 4.2" } ]

You can also convert select to stylish dropdown:

$(document.body).find("select").selectView();

You also can use this tree view for custom action menu using below command $(document.body).find("select.action_menu").actionView({ actionWidth: 140 });

And finally you download source code from here.