Selectize.js manually add some items

Question

I want add some items to a selectized input after user clicks on a button. The input data are loaded via Ajax. When I call addItem(value) no thing happens. But if I try to type some string in the input it loads data and after this addItem(value) will works.

https://github.com/brianreavis/selectize.js/blob/master/docs/api.md

I am having the same issue... addItem does not work at all for me. `var $tag_selects=$('#tags').selectize({options})` then `tag_select=$tag_selects[0].selectize;tag_select.addItem('test');` but `test` is never added — Fabrizio, Dec 09 '13 at 00:59

Handsome Nerd · Accepted Answer · 2019-01-10T02:54:29.240

65

This plugin does not attempt to load an item metadata from the server. You need to first add an option using addOption() method. Next, you can use addItem().

v.selectize.addOption({value:13,text:'foo'}); //option can be created manually or loaded using Ajax
v.selectize.addItem(13);

edited Jan 10 '19 at 02:54

answered Dec 09 '13 at 05:00

Handsome Nerd

17,114
22
95
173

i am geting this error `$(...).selectize.addOption is not a function ` how can i fix it – asif May 22 '18 at 17:17
you can use `items` property to provide initial values. `items: tags.split(','),` – HoseinGhanbari Aug 02 '18 at 08:20
2

@asif it is: `$(...)[0].selectize.addOption(...)`. Without the `[0]` it will not work :/ – Bryce Oct 23 '18 at 23:01

andyrandy · Answer 2 · 2017-12-15T11:18:12.527

42

You can add options like this:

var $select = $(document.getElementById('mySelect')).selectize(options);
var selectize = $select[0].selectize;
selectize.addOption({value: 1, text: 'whatever'});
selectize.refreshOptions();

This only adds the option as possible selection. Now you can use addItem to add the new option to the list:

selectize.addItem(1);

This does not need a refresh function. You do not need to use "refreshOptions" if you add the new option immediately.

edited Dec 15 '17 at 11:18

answered Sep 17 '14 at 12:03

andyrandy

72,880
8
113
130

Change selectice to selectize – Fábio Paiva Jan 09 '15 at 12:27
2

`selectize.addOption({id: 1, label: 'whatever'});` is no longer working. Now should be `selectize.addOption({value: 1, text: 'whatever'});` – topher Dec 15 '17 at 10:35

score 7 · Answer 3 · edited Mar 14 '17 at 13:56

7

Try this.

 $('.select-ajax-city').each(function() {
    if (this.selectize) {
        for(x=0; x < 10; ++x){
            this.selectize.addOption({value:x, text: x});
        }
    }
});

edited Mar 14 '17 at 13:56

Andrey

4,020
21
35

answered Jul 29 '15 at 12:46

Renato Damázio

199
1
4

Sohil Shingala · Answer 4 · 2018-10-30T04:18:58.810

7

Try This

var $select = $(document.getElementById('Your-element-id'));
var selectize = $select[0].selectize;
selectize.addOption({value: '2', text: 'test'});
selectize.addItem('2');

edited Oct 30 '18 at 04:18

answered Aug 08 '18 at 04:23

Sohil Shingala

194
3
13

score 2 · Answer 5 · answered Mar 11 '19 at 08:42

If you want to be more flexible then you can use the length like this.

var $select = $(document.getElementById('Your-ID'));        
var selectize = $select[0].selectize;
var count = selectize.items.length + 1;
selectize.addOption({ value: count, text: 'value-here' });
selectize.addItem(count);

score 0 · Answer 6 · answered May 17 '19 at 05:22

0

$('#id').selectize({
   create: function(input,callback){
      $.ajax({
           url: "",
           type: "POST",
           data: {value : input},
              success: function(res) {
                   callback({value: res, text: input});
              }
      });
   }
});

answered May 17 '19 at 05:22

user3048405

27
1

Could you comment on your solution? – Andronicus May 17 '19 at 05:56

score 0 · Answer 7 · answered Dec 04 '21 at 03:27

For adding new options dynamically is neccesary to call clearOptions for clean the options, adding the new list options using addOption and call refreshState function after all.

    var listItems = [{id: 1, value: 'Element1'},{id: 2, value: 'Element2'}]
    /* Initialize select*/
    var $select = $('#element').selectize();
    var control = $select[0].selectize;
    control.clear()
    control.clearOptions();

    /* Fill options and item list*/
    var optionsList = [];
    var itemsList = [];
    $.each(listItems, function() {
      optionsList.push( {
                      value: this.id,
                       text: this.value
              });
       itemsList.push({
                     value: this.id,
                      text: this.value
                  });
     });
      
     /* Add options and item and then refresh state*/                    
    control.addOption(optionsList)
    control.addItems(itemsList);
    control.refreshState();

    /* Add element 1 selected*/
    $.each(result, function() {
        if (this.id == 1) {
        control.addItem(this.Tax.id,this.Tax.title);
         }
           
    });

score 0 · Answer 8 · answered Mar 19 '22 at 21:03

This is another way you can add items manually if you have set other values to your select:

$('select').selectize({
    create: true,
    sortField: "text",
    hideSelected: false,
    closeAfterSelect: false,
    options:[
       {
         text:'<text goes here>',
         value:'<value goes here>',                  
      }
    ]
});

Selectize.js manually add some items

8 Answers8

Linked