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.
This question is related to
javascript
jquery
html
selectize.js
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);
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 < 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
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");
var $select = $(document.getElementById("selectTagName"));
var selectize = $select[0].selectize;
selectize.setValue(selectize.search("My Default Value").items[0]);
A simplified answer:
$('#my_input').data('selectize').setValue("Option Value Here");
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
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
});
}
});
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();
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");
First load select dropdown and then selectize it. It will work with normal $(select).val().
Source: Stackoverflow.com