How To Clear A Selected Value In Selectize.js Dropdown?

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; sele

Solution 1:

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 :

Solution 2:

Try this,

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

Solution 3:

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

    });
});

Solution 4:

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().

Solution 5:

$(document).on('click', 'div.selectize-input div.item', function(e) {
    varselect = $('#services').selectize();
    var selectSizeControl = select[0].selectize;
    // 1. Get the valuevar selectedValue = $(this).attr("data-value");
    // 2. Remove the optionselect[0].selectize.removeItem(selectedValue);
    // 3. Refresh the selectselect[0].selectize.refreshItems();
    select[0].selectize.refreshOptions();
});

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