Question

116

How to get the value of the currently selected Selectize.js input item

rated 0 times [ 122] [ 6] / answers: 1 / hits: 68838 / 10 Years ago, thu, july 10, 2014, 12:00:00

I was wondering, how could I get the value of the currently selected item in my Selectize.js input? I have checked the documentation and scoured everything selectize.js related on Stackoverflow but found nothing in the way of an example I could go off of. Any ideas? Here is what I figured would work based on the documentation, but instead gave me Undefined is not a function error.

Please note the very bottom of the code, where I use the select.on('change'; this (in addition to other API methods) is what I have tried. The on change works perfectly, but unfortunately nothing else has.

var select = $('#searchTextbox').selectize({

          maxItems: 1, //Max items selectable in the textbox

          maxOptions: 30, //Max options to render at once in the dropdown

          searchField: ['text'], //Fields the autocomplete can search through.  Example of another searchable field could be 'value'

          openOnFocus: true,

          highlight: true,

          scrollDuration: 60, //currently does nothing; should say how many MS the dropdown and drop up animations take

          create: false, //Whether or not the user is allowed to create fields

          selectOnTab: true,

          render: {

              option: function(data, escape) {

                  var valueArray = [];         

                  valueArray[0] = data.value.split(,);

                  var color = valueArray[0][0] == 1 ? green : red;



                  return '<div class=option style=color: ' 

                      + color 

                      + ';>' 

                      + escape(data.text) 

                      + '</div>';

              },

              item: function(data, escape) {

                  var valueArray = [];         

                  valueArray[0] = data.value.split(,);

                  var color = valueArray[0][0] == 1 ? green : red;



                  return '<div class=option style=color: ' 

                      + color 

                      + ';>' 

                      + escape(data.text) 

                      + '</div>';

              }      

          }

      });



select.on('change', function() {

      var test = select.getItem(0);

      alert(test.val());

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tiffany

Add To Favorites

Follow

Total Points: 46

Total Questions: 97

Total Answers: 84

Location: Comoros

Member since Tue, Mar 14, 2023

1 Year ago

answered 10 Years ago ignacio · Accepted Answer

Found the problem!

For anyone using selectize.js and having problems with the API, try this!

If you look at the part of the code where I initialized the selectize.js dropdown, I store the instance in my 'select' variable and that's it. However, this isn't the proper way to do things (from what I've seen at least). You need to do the following, rather than simply just storing the instance in a variable.

var $select = $(#yourSelector).selectize({

    //options here

});



var selectizeControl = $select[0].selectize

After you do this, you can use the API properly. Without doing it this way, I was getting an Undefined is not a function error.

Finally, to answer my own question, I was able to retrieve the current value of the selectize input by using the following code (the .on('change') and alert are obviously not necessary):

selectizeControl.on('change', function() {

      var test = selectize.getValue();

      alert(test);

});

Why it's necessary to do it this way I'm not exactly sure. Perhaps someone could enlighten me and any future viewers as to why this way works and my previous method didn't.

I hope this helps someone else out in the future. Feel free to edit and make any changes.