How to programmatically add a parameter to an option group in selectize.js

Question

I want to dynamically add a parameter to the option group in Selectize.js. API only has

addOption(data) updateOption(value, data) addOptionGroup(id, data) 

without much help regarding what "data" is. I saw examples of adding an option, but did not mention using optionsGroups

 $('#button-addoption').on('click', function() { control.addOption({ id: 4, title: 'Something New', url: 'http://google.com' }); 

thanks

Answer 1

Data is an object passed to the optgroup rendering method. So you can put something in it.

 $('#selectize').selectize({ ... optgroupField: 'mygroup', render: { optgroup_header: function(data, escape) { return '<div class="optgroup-header">' + escape(data.a) + escape(data.b) '</div>'; } }, ... }); 

And then, whenever you want, you can add groups and parameters to selectize:

 //add group var optGroup = { a: 'fruit', b: ... }; $('#selectize')[0].selectize.addOptionGroup('0', optGroup); //add option var option = { value: 'abc', text: 'banana', mygroup: '1'}; $('#selectize')[0].selectize.addOption(option); 

Of course, if you only need a label for the group, you can do this:

 //code ... render: { optgroup_header: function(data, escape) { return '<div class="optgroup-header">' + escape(data) + '</div>'; } ... //code $('#selectize')[0].selectize.addOptionGroup('1', 'meat'); 

You can see a demo of the API (search on the "Optical groups (software)" page on the page).