Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

How to use .setValue() ? #1965

Answered by inspector71
inspector71 asked this question in Q&A
Discussion options

Want to programmatically change the selected option.

First I initialize many selectize instances on document.(ready) via a jQuery selection of many select fields at once:

 jQuery('.booleanWithDependancies select').selectize({
 plugins : ["clear_button"]
 });

Note: I'm not storing the result in a variable. Perhaps I need to?
Note: All instances work as expected, so I'm unsure if initializing multiple instances in one jQuery selection is a problem, but maybe it is?

Later, I try to grab one instance like this:

var $selectizeInstance = jQuery( '#' + variable ).selectize;

... where variable is a identifier string, because the above is used within a loop to iterate through setting the value of more than one selectize instance, and this is the result:

function selectize(settings_user)

I found documentation for getting an instance of a selectized element and tried to follow it but not convinced I am following it properly because I'm not storing the many selectize_ instances created with the first code example above. Also unsure what $selectize[0] refers to. First of many possible instances?

Having seemingly got a selectize instance, this:

$selectizeInstance.setValue([ 43 ]);

results in:

Uncaught TypeError: jQuery(...).selectize.setValue is not a function

Tried to finding clues via the only .setValue() documentation I found but that only demonstrates calling .setValue() in an event handler assignment scenario:

<select id="select-tools" multiple placeholder="Pick a tool..."></select>
var $select = $('#select-tools').selectize({
 maxItems: null,
 valueField: 'id',
 labelField: 'title',
 searchField: 'title',
 options: [
 {id: 1, title: 'Spectrometer', url: 'http://en.wikipedia.org/wiki/Spectrometers'},
 {id: 2, title: 'Star Chart', url: 'http://en.wikipedia.org/wiki/Star_chart'},
 {id: 3, title: 'Electrical Tape', url: 'http://en.wikipedia.org/wiki/Electrical_tape'}
 ],
 create: false
});
var control = $select[0].selectize;
$('#button-setvalue').on('click', function() {
 control.setValue([2, 3]);
});

However the 'event' I am using is the response from an XHR request. So all I really need to do, or so I think/thought, is to get a selectize instance and set it's value.

Does anyone have some insight on how to do this, perhaps where I am going wrong?

You must be logged in to vote

UPDATE: I figured this one out.

It does seem that, as suspected, I needed to 'trap' (AKA assign) each instance I was creating with the jQuery selection returning many select elements as selectize instances. This involved the following:

 jQuery('.booleanWithDependancies select').each( function ( idx , el ) {
 window[ '$selectize' + el.name ] = jQuery( el ).selectize({
 plugins : ["clear_button"]
 });
 })

Apparently window['$selectize' + el.name ] is the same as creating a dynamic, unique variable on the fly using eval(). Having memory burn of whispers that eval() is a performance hit, I went with window[] instead.

Later ...

 jQuery.ajax({
 ...

Replies: 1 comment

Comment options

UPDATE: I figured this one out.

It does seem that, as suspected, I needed to 'trap' (AKA assign) each instance I was creating with the jQuery selection returning many select elements as selectize instances. This involved the following:

 jQuery('.booleanWithDependancies select').each( function ( idx , el ) {
 window[ '$selectize' + el.name ] = jQuery( el ).selectize({
 plugins : ["clear_button"]
 });
 })

Apparently window['$selectize' + el.name ] is the same as creating a dynamic, unique variable on the fly using eval(). Having memory burn of whispers that eval() is a performance hit, I went with window[] instead.

Later ...

 jQuery.ajax({
 url : 'scriptReturningJSON',
 data : {
 item : ev.currentTarget.value
 }
 }).done( function ( rspnse ) {
 if ( typeof rspnse[0] !== 'undefined' ) {
 jQuery.each( rspnse , function ( idx , el ) {
 const selectIdSuffixString = rspnse[ idx ].variety;
 const optionValueInteger = rspnse[ idx ].id;
 var control = window[ '$selectize' + selectIdSuffixString ][0].selectize;
 control.setValue( optionValueInteger )
 }
 });
 } 
 });

I hope this helps someone in the future.

You must be logged in to vote
0 replies
Answer selected by inspector71
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
1 participant

AltStyle によって変換されたページ (->オリジナル) /