Get Text From Selected using selectize

Question

I've tried this:

var eventHandler = function() {
    return function() {
        console.log($select.val());
    };
};
var $select = $('.selectize').selectize({
    create          : true,
    onChange        : eventHandler()

});

Which get me the value of the selected option but I need the text. When I do this:

console.log($select.val().text());

I get an error. I've tried other things to no avail. How do I get the selected text?

Answer 1

you can get selected text by :

$('select').selectize({
         onInitialize: function (selectize) {
            selectize.on('change', function (value) {
                 var item = this.$input[0];
                 var selected_text = $(item.selectize.getItem(value)[0]).text();
              });
        }
 }

Answer 2

select_option.getItem(select_option.getValue())[0].innerHTML; select_option = $select_option[0].selectize; to get text value of a specified dropdown option.

this.getItem(value)[0].innerHTML to get text value of current dropdown option

Answer 3

the easiest way is to use onChange event and get text from selected option

JS:

$(function(){
$('#select').selectize({
					create: true,
					sortField: {
						field: 'text',
						direction: 'asc'
					},
					onChange:function(value){
					 $(".log").append("Value:" + value + "<br />");
      $(".log").append("Text:" +$("#select option:selected").text() + "<br />");
					},
					dropdownParent: 'body'
				});
});

<link rel="stylesheet" type="text/css" href="https://selectize.github.io/selectize.js/css/styles.css">
<link rel="stylesheet" type="text/css" href="https://selectize.github.io/selectize.js/css/selectize.default.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="https://selectize.github.io/selectize.js/js/selectize.js"></script>


<select id="select" class="control-form" data-placeholder="Select a person...">
<option value="">None</option>
<option value="4">Thomas Edison</option>
<option value="1">Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
<div class="log"></div>

Demo Here