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

Sometimes, we want to get the value of the currently selected Selectize.js input item.

In this article, we’ll look at how to get the value of the currently selected Selectize.js input item.

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

To get the value of the currently selected Selectize.js input item, we can add a onChange handler into the Selectize option object.

For instance, we write:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.css" />

<select id='searchTextbox'>
  <option>apple</option>
  <option>orange</option>
  <option>grape</option>
</select>

to add the jQuery scripts, Selectize script and the Selectize CSS.

We also add the select element we use to convert to a Selectize drop down.

Then we write:

$('#searchTextbox').selectize({
  maxItems: 1, 
  maxOptions: 30, 
  onChange(value) {
    console.log(value);
  }
});

to select the select element with $.

And we call selectize on it with an object with the onChange method.

It takes the value parameter which is the selected item’s value.

Now when we select an item from the Selectize drop down, we should see the value logged in the console.

Conclusion

To get the value of the currently selected Selectize.js input item, we can add a onChange handler into the Selectize option object.