{"id":36924279,"url":"https://github.com/clivezhg/select2-to-tree","last_synced_at":"2026-01-28T10:01:04.475Z","repository":{"id":54261892,"uuid":"84381618","full_name":"clivezhg/select2-to-tree","owner":"clivezhg","description":"Select2-to-Tree extends Select2 to support arbitrary level of nesting...","archived":true,"fork":false,"pushed_at":"2024-06-19T09:06:01.000Z","size":42,"stargazers_count":80,"open_issues_count":11,"forks_count":42,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-06-20T17:13:45.296Z","etag":null,"topics":["javascript","select","select2","tree","treeview"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/clivezhg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-09T01:00:02.000Z","updated_at":"2024-06-19T09:09:01.000Z","dependencies_parsed_at":"2024-06-19T16:31:06.985Z","dependency_job_id":"824211e6-6f3c-4fe7-9bad-9fc8a41d32e9","html_url":"https://github.com/clivezhg/select2-to-tree","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/clivezhg/select2-to-tree","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clivezhg%2Fselect2-to-tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clivezhg%2Fselect2-to-tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clivezhg%2Fselect2-to-tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clivezhg%2Fselect2-to-tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clivezhg","download_url":"https://codeload.github.com/clivezhg/select2-to-tree/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clivezhg%2Fselect2-to-tree/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28844011,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-28T07:39:25.367Z","status":"ssl_error","status_checked_at":"2026-01-28T07:39:24.487Z","response_time":57,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","select","select2","tree","treeview"],"created_at":"2026-01-12T19:00:25.492Z","updated_at":"2026-01-28T10:01:04.450Z","avatar_url":"https://github.com/clivezhg.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003ch1\u003eThis project is not maintained by the author.\u003c/h1\u003e\n\u003chr\u003e\n\nSelect2-to-Tree\n=======\n\nSelect2-to-Tree is an extension to Select2, a popular select boxes library: https://github.com/select2/select2.\n\nThough Select2 is very versatile, it only supports a single level of nesting. See https://select2.github.io/options.html#how-many-levels-of-nesting-are-allowed:\n\u003cblockquote\u003e\nBecause Select2 falls back to an \u0026lt;optgroup\u0026gt; when creating nested options, only a single level of nesting is supported. Any additional levels of nesting is not guarenteed to be displayed properly across all browsers and devices.\u003c/blockquote\u003e\n\nSelect2-to-Tree extends Select2 to support arbitrary level of nesting.\n\nSelect2 compatibility\n---------------------\n* Select2 4+\n\nBrowser compatibility\n---------------------\n* IE 8+\n* Chrome 8+\n* Firefox 10+\n* Safari 3+\n* Opera 10.6+\n\nUsage\n-----\nFirstly, you need to know the usage of Select2: https://github.com/select2/select2\n\nThen, in your HTML document, you add the Select2 library (the `*.js` file \u0026 `*.css` file, currently the version should be 4.0+), and the Select2-to-Tree library (the `*.js` file \u0026 `*.css` file in the \"`src`\" folder). jQuery is also needed.\n\nThere are 2 ways to use Select2-to-Tree:\n\n\u003ch3\u003e1. Use data, and empty \u0026lt;select\u0026gt; element(see \"Example 1\" in \"example/example.html\"):\u003c/h3\u003e\n\nSuppose your HTML is like this:\n```html\n\u003cselect id=\"sel_1\" style=\"width:16em\" multiple\u003e\n\u003c/select\u003e\n```\nAnd your data:\n```js\nvar mydata = [\n   {id:1, text:\"USA\", inc:[\n      {text:\"west\", inc:[\n         {id:111, text:\"California\", inc:[\n            {id:1111, text:\"Los Angeles\", inc:[\n               {id:11111, text:\"Hollywood\"}\n            ]},\n            {id:1112, text:\"San Diego\", selected:\"true\"}\n         ]},\n         {id:112, text:\"Oregon\"}\n      ]}\n   ]},\n   {id:2, text:\"India\"},\n   {id:3, text:\"中国\"}\n];\n```\nAnd you call Select2-to-Tree like the following:\n```js\n$(\"#sel_1\").select2ToTree({treeData: {dataArr:mydata}, maximumSelectionLength: 3});\n```\n\"`{treeData: {dataArr:mydata}`\" is for Select2-to-Tree, \"`maximumSelectionLength: 3`\" is for Select2 (and you can set the other Select2 arguments if needed)\n\nAbout the data structure: \"`id`\" will be used as option value, \"`text`\" will be used as option label, and \"`inc`\" will be used to specify sub-level options. If your data structure is not like this, you can set arguments in \"`treeData`\" to change the default behavior, e.g., `treeData: {dataArr: mydata, valFld: \"value\", labelFld: \"name\", incFld: \"sub\"}`:\n- `dataArr`, an array containing the data.\n- `valFld`, the option value field, it's \"`id`\" by default. (if the value is empty, the corresponding option will be unselectable, see the \"west\" option in the example)\n- `selFld`, the selected value field, it's \"`selected`\" by default.\n- `labelFld`, the option label field, it's \"`text`\" by default.\n- `incFld`, the sub options field, it's \"`inc`\" by default.\n- `dftVal`, the default value.\n\nFor `valFld` and `labelFld`, you can give a object path (eg: `item.label`. see \"Example 4\" in \"example/example.html\").\n\nThe above are all the parameters supported by Select2-to-Tree.\n\n\u003ch3\u003e2. directly create the \u0026lt;select\u0026gt; element(see \"Example 2\" in \"example/example.html\"):\u003c/h3\u003e\n\nIf it's hard to create the required data structure, you can directly create the \u0026lt;select\u0026gt; element. It's like the following:\n```html\n\u003cselect id=\"sel_2\" style=\"width:8em\"\u003e\n   \u003coption value=\"1\" class=\"l1 non-leaf\"\u003eopt_1\u003c/option\u003e\n   \u003coption value=\"11\" data-pup=\"1\" class=\"l2 non-leaf\"\u003eopt_11\u003c/option\u003e\n   \u003coption value=\"111\" data-pup=\"11\" class=\"l3\"\u003eopt_111\u003c/option\u003e\n   \u003coption value=\"12\" data-pup=\"2\" class=\"l2\"\u003eopt_12\u003c/option\u003e\n   \u003coption value=\"2\" class=\"l1\"\u003eopt_2\u003c/option\u003e\n   \u003coption value=\"3\" class=\"l1\"\u003eopt_3\u003c/option\u003e\n\u003c/select\u003e\n```\n- the classes `l1`,`l2`,`l3`,`l4`,`l5`..., setting the nesting level.\n- the attribute `data-pup`, setting the value of the parent level option.\n- the class `non-leaf`, setting whether the option has children or not.\n\nThen, you call Select2-to-Tree (the \"`treeData`\" argument of Select-to-Tree is not needed here, but you can set arguments for Select2):\n```js\n$(\"#sel_2\").select2ToTree();\n```\n\nStyling\n-----\nSelect-to-Tree uses CSS rules(in the select2totree.css file) to control the indent \u0026 size of each level, e.g.:\n```\n.s2-to-tree .select2-results__option.l8 {\n\tmargin-left: 6.0em;\n\tfont-size: 0.75em;\n}\n```\nBy default, Select-to-Tree defines 8 levels, if you need more than 8 levels, you can add your own CSS rules.\nYou can also change or override the pre-defined CSS rules to match your requirements.\n\nConstraints\n-----------\n- AJAX data source is not supported.\n- It is a little slower than plain Select2, because there are extra operations to do. Anyway, according to my test (you can check \"Example 3\" in \"example/example.html\", click the \"India -\u003e north\"), 1500 options is basically acceptable, which is enough in most of the real world cases.\n\nIllustration\n------------\nSee \"Example 3\" in \"example/example.html\":\n\n\u003cimg src=\"https://user-images.githubusercontent.com/22025586/29951519-ce573a82-8ef5-11e7-954d-2fe6c530dbf3.png\"\u003e\n\nCopyright and license\n---------------------\nThe license is available within the repository in the [LICENSE][license] file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclivezhg%2Fselect2-to-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclivezhg%2Fselect2-to-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclivezhg%2Fselect2-to-tree/lists"}