50

I have a selectize.js dropdown and I have to clear the selected value .

I have tried this (as suggested in another question):

var selectize = $("#optionNetFlow")[0].selectize;
selectize.clear();

But it gives the following error:

enter image description here


When I change it to this:

var selectize = $("#optionNetFlow").selectize;
selectize.clear();

I gives this error:

enter image description here


What I am doing wrong here?

informatik01
  • 16,038
  • 10
  • 74
  • 104
Pranav Singh
  • 17,079
  • 30
  • 77
  • 104
  • 3
    If you check [docs](https://github.com/brianreavis/selectize.js/blob/master/docs/api.md#methods_other) mentioned in [provided](http://stackoverflow.com/questions/20497833/how-do-i-set-the-selectize-js-option-list-programmatically) **incorrect** answer (just imagine - 9 vote ups for incorrect answer. Well, maybe other part of answer is correct, but the first code line is deadly wrong) - you will see how it has to be done. – Regent Nov 14 '14 at 05:55
  • Thanks @Regent, I got it sorted. Thanks for help. – Pranav Singh Nov 14 '14 at 06:00
  • It happens sometimes. Sometimes without any adequate reason. Just relax. It's not that you have low reputation, you know. My vote up can compensate 2.5 downvotes. – Regent Jun 25 '15 at 13:23

6 Answers6

82

I finally found the answer here Selectize.js Demos

What works for me is:

 var $select = $('#optionNetFlow').selectize();
 var control = $select[0].selectize;
 control.clear();

what I was missing var $select = $('#optionNetFlow').selectize(); before applying the solution provided in above question's answer.

Now I am to get all the functions in console like :

enter image description here

Pranav Singh
  • 17,079
  • 30
  • 77
  • 104
  • This solution also removes the record(clear the dropdown list). You can no longer search in the list. – khan Jun 25 '19 at 10:51
  • 1
    @khan No it doesn't. Just checked this solution - it works perfectly. I can still search and select the cleared item. Version used to check this - **Selectize.js v0.12.4**. – informatik01 Feb 20 '20 at 15:54
25

Try this,

$("#optionNetFlow")[0].selectize.clear();
iloo
  • 926
  • 12
  • 26
cownan_kun
  • 386
  • 3
  • 8
  • 4
    This is the best way, you don't have to store the selectize in a global variable when initializing, just call this whenever you need. – Mateus Viccari Jan 26 '18 at 15:29
  • 1
    Best answer. And after you have cleared the input, you might need to focus it, to open list. Use for that: focus(). – Gustav Oct 21 '18 at 13:51
  • 1
    that's great it works for me I just added the ID of my select box and boom it worked thanks a lot – muhaymin khan Jan 20 '21 at 06:14
11

Try this out:- http://jsfiddle.net/adiioo7/2gnq1ruv/204/

JS:-

jQuery(function ($) {
    var $select = $('#input-tags').selectize({
        persist: false,
        create: true
    });

    $("#btnClear").on("click", function () {
        var selectize = $select[0].selectize;
        selectize.clear();

    });
});
Aditya Singh
  • 9,512
  • 5
  • 32
  • 55
9

All other answers either clear a single selectize or need a specific reference to the selectize in the moment of it's creation.

The solution below, on the other hand, works for any number of selectize elements you have inside any form; you just need to specify the desired form:

$('form').find('.selectized').each(function(index, element) { element.selectize && element.selectize.clear() })

The rationale is that Selectize keeps the original element in the DOM (hiding it), adds a reference to the selectize on the .selectize property of the DOM element and adds a CSS class selectized to it.

So the solution finds all the elements that have the CSS class selectized, loops through them and calls element.selectize.clear().

sandre89
  • 5,218
  • 2
  • 43
  • 64
  • +1 for this! But just a question, what does this line means? `element.selectize && element.selectize.clear()` – Quer Sep 20 '19 at 10:17
  • It means: if element.selectize isn't null or undefined, then clear it – Mark Oct 02 '19 at 22:35
1
$(document).on('click', 'div.selectize-input div.item', function(e) {
    var select = $('#services').selectize();
    var selectSizeControl = select[0].selectize;
    // 1. Get the value
    var selectedValue = $(this).attr("data-value");
    // 2. Remove the option
    select[0].selectize.removeItem(selectedValue);
    // 3. Refresh the select
    select[0].selectize.refreshItems();
    select[0].selectize.refreshOptions();
});

This do not remove the item from the select, just remove it from the selected options.

M4r
  • 351
  • 4
  • 5
1

Or if you have multi select, and do want to restore selected items in the drop-down list (hide selected set to true).

var selectize = $("#select-item").selectize;
//clone array
var items = selectize.items.slice(0);
for (var i in items) {
    selectize.removeItem(items[i]);
}
selectize.refreshOptions();
Andriy
  • 973
  • 8
  • 13