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 values programatically   The standard way of doing this       my input   val  My Default Value      does not work   I have tried something like this but it does not work either   var  select       my input   selectize    var selectize    select 0  selectize  selectize setValue  My Default Value       Any ideas   It s got to be easy     I m missing it

User · Answer

var  select     document getElementById  selectTagName     var selectize    select 0  selectize  selectize setValue selectize search  My Default Value   items 0

User · Answer

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

User · Answer

A simplified answer       my input   data  selectize   setValue  Option Value Here

User · Answer

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

User · Answer

Here is my full code using tag from remote search  Hope this is helpful       myInput   selectize   valueField   id   labelField   name   searchField   name   options      delimiter       persist  false  create  false  load  function query  callback        if   query length  return callback          ajax           url    api all cities php           type   GET           dataType   json           data                name  query                     error  function                 callback                       success  function res                callback res                        onInitialize  function        var selectize   this        get   api selected cities php   function  data             selectize addOption data      This is will add to option         var selected items                 each data  function  i  obj                selected items push obj id                       selectize setValue selected items     this will set option values as default

User · Answer

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

User · Answer

just ran into the same problem and solved it with the following line of code   selectize addOption  text   My Default Value   value   My Default Value     selectize setValue  My Default Value

User · Answer

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  quot silent quot  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

User · Answer

First load select dropdown and then selectize it   It will work with normal   select  val

User · Answer

I had a similar problem  My data is provided by a remote server  I want some value to be entered in the selectize box  but it is not sure in advance whether this value is a valid one on the server    So I want the value to be entered in the box  and I want selectize to show the possible options just if like the user had entered the value   I ended up using this hack  which it is probably unsupported    var  selectize       my input   selectize    settings with load     var selectize    select 0  selectize     get the search from the remote server selectize onSearchChange  my value       enter the input in the input field  selectize parent   find  input   val  my value       focus on the input field  to make the options visible  selectize parent   find  input   focus

User · Answer

Note setValue only works if there are already predefined set of values for the selectize control   ex  select field    for controls where the value could be dynamic   ex  user can add values on the fly  textbox field   setValue ain t gonna work   Use createItem functon instead for adding and setting the current value of the selectize field  ex    selectize  0   selectize clear       Clear existing entries for   var i   0   i  lt  data source length   i        data source is a dynamic source of data      selectize  0   selectize createItem  data source  i     false       false means don t trigger dropdown

[javascript] How to set a value for a selectize.js input?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to selectize.js