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

Dutch

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 – Peshitta

@Peshitta I found a solution. See the answer. – Dutch

Answer 1

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); 

Dutch

i am geting this error $(...).selectize.addOption is not a function how can i fix it – Disrespectful

you can use items property to provide initial values. items: tags.split(','), – Pohai

@Disrespectful it is: $(...)[0].selectize.addOption(...). Without the [0] it will not work :/ – Allstar

Answer 2

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.

Chlordane

Change selectice to selectize – Redintegrate

selectize.addOption({id: 1, label: 'whatever'}); is no longer working. Now should be selectize.addOption({value: 1, text: 'whatever'}); – Selassie

Answer 3

Try this.

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

Youth

Answer 4

Try This

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

Serialize

Answer 5

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);

Corrosion

Answer 6

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

Compotation

Could you comment on your solution? – Terpene

Answer 7

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);
         }
           
    });

Rasheedarasher

Answer 8

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>',                  
      }
    ]
});

Aquino