4

selectize.js

It is possible to add a non selectable category (label) to the input selection?

enter image description here

The problem is, that I have a big list of inputs and it would be great to add categories (labels) to the selection. Like this:

Category 1
---Item1
---Item2
---Item3
---Item4
Category 2
---Item5
---Item6
---Item7
---Item8
...etc
Adrian
  • 2,576
  • 9
  • 49
  • 97
  • Selectize.js, as it is, only returns the a list with tags selected (no matter the category they are in). You mean you want it to return the list of selected tags divided by category? – Ángela Oct 23 '15 at 11:48

2 Answers2

2

You can enable both tag creation and option groups. It seems to work here.

Use a select element, with optgroup for categories:

<select id="select-gear" class="demo-default" multiple placeholder="Select gear...">
    <option value="">Select gear...</option>
    <optgroup label="Climbing">
        <option value="pitons">Pitons</option>
        <option value="sling">Sling</option>
    </optgroup>
    <optgroup label="Skiing">
        <option value="skis">Skis</option>
        <option value="skins">Skins</option>
        <option value="poles">Poles</option>
    </optgroup>
</select>

When you initialize it, use the option create : true:

$('#select-gear').selectize({
    create: true
});
Ángela
  • 1,405
  • 18
  • 24
  • This seems to solve @Adrian's problem https://github.com/brianreavis/selectize.js/blob/master/docs/plugins.md also helps if custom solution needs to be achieved. – jpaljasma Oct 24 '15 at 12:02
  • @jpaljasma Yes, that might help if OP does need to create _categories_, not just tags. – Ángela Oct 24 '15 at 12:05
  • @Ángela I can't find any demo to how to submit this in a form. It is possible to submit value as string, delimited by comma. "Pitons, Sling, Skins, Poles". – Adrian Oct 24 '15 at 21:11
  • How are you submitting the form? You mean you are not getting the value server-side? That might need to be another question... – Ángela Oct 24 '15 at 21:50
  • You can [transform an array into a comma-separated string](http://stackoverflow.com/questions/201724/easy-way-to-turn-javascript-array-into-comma-separated-list)... but why would you want to do that? – Ángela Oct 24 '15 at 21:54
1

Selectize supports <optgroup>

enter image description here

Ramesh Kotha
  • 8,266
  • 17
  • 66
  • 90
  • Nice, but I still want to keep function to add my own tags, which are not in the input list. – Adrian Oct 13 '15 at 21:17