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

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

Answer 2

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 3

• Retrieving the selected value : selectize_obj.getValue()
• Retrieving the selected text : $(selectize_obj.getItem(value)).html()

Answer 4

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 5

Simply using $('select[class*="selectize"] option') worked for me. I used *= because I often use multiple classes at a time on elements (more on jQuery selectors/wildcards at w3schools.com). Otherwise, if using id or name, I would use $('select[id="selectize-id"] option') or $('select[name="selectize-name"] option') respectively.

Then, to get the option value, I add on .text() and to get the option key I add on .val().

Example

If I have a list of countries and "usa" is the currently selected value with "United States" being the currently viewable text, I would do the following:

• $('select[class*="selectize"] option').val() to return "usa"
• $('select[class*="selectize"] option').text() to return "United States"

Possible Alternative

Simply using the basic id selector -- as in $('#selectize-id option') -- did not work. However, using the basic class selector -- as in $('.selectize-class option') -- did seem to work (more on attribute selectors on w3schools.com). Perhaps someone can comment on the difference between the two ($('#someId) vs $('element[id="someId"]')) that causes this.

Answer 6

This thing can be added via prototype:

Selectize.prototype.getText = function () {
    return this.getItem(this.getValue()).text();
};

If someone would need method setText (like corresponding method setValue) it can be added this way:

Selectize.prototype.setText = function (text) {
    var selectize = this;
    $.each(this.options, function (propertyName, propertyValue) {
        if (propertyValue[selectize.settings.labelField] === text) {
            selectize.setValue(propertyName);
            return false;
        }
    });
};