Jquery Tree Select

Tree select plugin for jquery

installation

+ npm:
+ npm i x-tree-select
+ yarn:
+ yarn add x-tree-select

Usage

+ Include css file:
+ ``html

`

+ Include js file:
+ `html

`

+ Add to input:
`html
name="test"
id="test"
placeholder="plz select"/>

`

how use in webpack

+ import the module:

import xtreeselec from 'x-tree-select';
+ add your element:

+ initialze the element with js:
`javascript
$(".treeSelect").treeSelect({
datatree: [
// your json here
]
});
`

+ for example in webpack vuejs
`html




`

Options

The tree select options you can customize your plugine usagae

| Option | Default | Description |
| ------ | ------ | ------ |
| direction| ltr | you can use rtl too for your project|
| searchable| false | searchable element |
| datatree| []| The data need navigate in tree select watch abow example to how bind this value|
|mainTitle| "Main category"| The title of back button to main category list |
|transition| "fade"| The change page animation transition effect |
|json| {title: 'title',value: 'value',child: 'child'}| The json for your data tree key names you can change keys|
| selectablePrernt| false | Is the parent selectable |

events

The event you can use for tree select

$3

Triggered when opening select input
sample:
`javascript
$("#tree-select").treeSelect({
onOpen: function(){
alert('opened');
}
});
`

$3

Triggered when closing select input
sample:
`javascript
$("#tree-select").treeSelect({
onClose: function(){
alert('closed');
}
});
`

$3

Triggered when selecting select input
sample:
`javascript
$("#tree-select").treeSelect({
onSelect: function(selected){
console.log(selected);
}
});
`

$3

Triggered when change select input value
sample:
`javascript
$("#tree-select").treeSelect({
onChange: function(oldVal,newVal){
console.log(oldVal,newVal);
}
});
`

Browser compatibility

- !ie IE >= 9
- !edge Edge all version
- !firefox Firefox >= 16
- !safari Safari >=11
- !chrom/!chromium chrome / chromium >= 26
- !opera Opera >=15
- !android Android browser >= 4.4
- Blackberry Browser >= 10
- !ios safari iOS Safari >= 7

Support

If you found a bug or have a feature suggestion, please submit it in the Issues tracker.

Demo

See demo/index.html` for demo.

you can see online demo (example) here:

http://4xmen.ir/github_example/tree-select/demo/