Tree select for jquery.
npm install x-tree-selectTree select plugin for jquery
+ npm:
+ npm i x-tree-select
+ yarn:
+ yarn add x-tree-select
+ Include css file:
+ ``html`
+ Include js file:
+ `html`
+ Add to input:
`html`
name="test"
id="test"
placeholder="plz select"/>
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
import xtreeselec from 'x-tree-select';
export default {
name: "mycompnent",
data: function () {
return {
// ...
}
},
mounted: function () {
$(".treeSelect").treeSelect({
datatree: [
// ...
]
});
}
}
`
| 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 |
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 >= 7Support
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/