How to set a value for a selectize.js input?

Question

I have a form from which I would like to copy some default values into the inputs. The form inputs are using the selectize.js plugin. I would like to set some of the form

Answer 1

This works for me:

var $select = $("#my_input").selectize();
var selectize = $select[0].selectize;
selectize.setValue(selectize.search("My Default Value").items[0].id);

but you have to be really really sure that you only have one match.

Update: As this solution works perfect, in-order to make it working even if there are multiple select elements on page I have updated the answer:

Following way we can initialize:

$('select').each(function (idx) {
    var selectizeInput = $(this).selectize(options);
    $(this).data('selectize', selectizeInput[0].selectize);
});

Setting value pragmatically post initialization:

var selectElement = $('#unique_selector').eq(0);
var selectize = selectElement.data('selectize');
if (!!selectize) selectize.setValue("My Default Value");

Answer 2

Answer by the user 'onlyblank' is correct. A small addition to that- You can set more than 1 default values if you want.

Instead of passing on id to the setValue(), pass an array. Example:

var $select = $("#my_input").selectize();
var selectize = $select[0].selectize;
var yourDefaultIds = [1,2]; # find the ids using search as shown by the user onlyblank
selectize.setValue(defaultValueIds);

Answer 3

A simplified answer:

$('#my_input').data('selectize').setValue("Option Value Here");

Answer 4

I was having this same issue - I am using Selectize with Rails and wanted to Selectize an association field - I wanted the name of the associated record to show up in the dropdown, but I needed the value of each option to be the id of the record, since Rails uses the value to set associations.

I solved this by setting a coffeescript var of @valueAttr to the id of each object and a var of @dataAttr to the name of the record. Then I went through each option and set:

 opts.labelField = @dataAttr
 opts.valueField = @valueAttr

It helps to see the full diff: https://github.com/18F/C2/pull/912/files

Answer 5

Check the API Docs

Methods addOption(data) and setValue(value) might be what you are looking for.

---

Update: Seeing the popularity of this answer, here is some additional info based on comments/requests...

setValue(value, silent)
  Resets the selected items to the given value.
  If "silent" is truthy (ie: true, 1), no change event will be fired on the original input.

addOption(data)
  Adds an available option, or array of options. If it already exists, nothing will happen.
  Note: this does not refresh the options list dropdown (use refreshOptions() for that).

---

In response to options being overwritten:
This can happen by re-initializing the select without using the options you initially provided. If you are not intending to recreate the element, simply store the selectize object to a variable:

// 1. Only set the below variables once (ideally)
var $select = $('select').selectize(options);  // This initializes the selectize control
var selectize = $select[0].selectize; // This stores the selectize object to a variable (with name 'selectize')

// 2. Access the selectize object with methods later, for ex:
selectize.addOption(data);
selectize.setValue('something', false);


// Side note:
// You can set a variable to the previous options with
var old_options = selectize.settings;
// If you intend on calling $('select').selectize(old_options) or something