CODEWITHSUNDEEP
jqueryselectize.js
Casey
Casey

Reputation: 1981

Get Text From Selected using selectize

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?

Upvotes: 11

Views: 24471

Answers (9)

Nani
Nani

Reputation: 11

this trick worked for me when using single item selectize:

var selectedText_ = "";
var val_ = $("#mySelect")[0].selectize.items[0]; // get first value
if (val_)
    selectedText_ = $("span[data-value=" + val_  + "] div").text(); // get text

You can manipulate the code above using a loop if you want to select all Texts from your multi-value selectize

Upvotes: 0

Krishnan KK
Krishnan KK

Reputation: 313

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

Upvotes: 1

kips15
kips15

Reputation: 108

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.

Upvotes: 0

Nelson Cespedes
Nelson Cespedes

Reputation: 471

You could get the text with this line:

ddlcontrol[0].selectize.getItem(ddlcontrol[0].selectize.getValue()).text();

where ddlcontrol comes from:

var ddlcontrol = $('#ddCountry').selectize({
 valueField: 'id',
 labelField: 'name',
 searchField:['name']
});

Hope it works for you!.

Upvotes: 4

HamidReza
HamidReza

Reputation: 1934

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();
              });
        }
 }

Upvotes: 7

Vadim Ovchinnikov
Vadim Ovchinnikov

Reputation: 14012

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;
        }
    });
};

Upvotes: 3

Core
Core

Reputation: 618

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

Upvotes: 7

Parveen Saini
Parveen Saini

Reputation: 91

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

Upvotes: 9

Casey
Casey

Reputation: 1981

So I got it working kind of. It's damn kludgey and there has to be a better way. There's a method getValue() but there's isn't a corresponding getText() method.

var eventHandler = function() {
    return function() {
        var something = selectizeControl.getItem(selectizeControl.getValue());
        console.log(something.text());
    };
};

var $select = $('.selectize').selectize({
    create          : true,
    onChange        : eventHandler()

});
var selectizeControl = $select[0].selectize

Upvotes: 4

Related Questions