How to remove an item from Selectize?

Question

Is there any way I can remove an item from Selectize?

Here is my a sample list:

1. AMNT
2. QTY
3. NA

When I pass NA it should remove particular item:

   $.fn.removeSelectorValue = function (value) {
      var selectize = this[0].selectize;
      selectize.removeItem(value);

      return this;
   };

This is not working. Can anyone help me with this?

Valise

Answer 1

removeItem removes selected item identified by given value. To remove option from the list you should use removeOption

Example - open http://brianreavis.github.io/selectize.js/, open console and enter:

$('#select-beast')[0].selectize.removeOption(1)

to remove Chuck Tesla from available options

Fruma

i think it does not work for me,the options are coming from server from enum – Valise

If i understand correctly you want to remove option from the list when user selects it e.g. when user selects AMNT then list contains only QTY, NA. If this is not the case, than please explain problem from user perspective. – Akkadian

I do not want to remove selected option, i have 3 lists coming from server while onShow , but i donot want the three list(qty,amnt,na) to display . onShow itself i have to remove that option.Not after selecting.I am Using Backbone,Marionette and Selectize for that . My selecter is something like this this.ui.__el_String__xyzSelector() – Valise

This xyzSelector having some code which will return the list in a lookUp way – Valise

The only problem with this method, is if the selected item is the item to be removed, it minimize the select box and it looks buggy, please tell me if you found a solution for that. – Gauger

Answer 2

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

    select[0].selectize.refreshItems();
    select[0].selectize.refreshOptions();

});

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

Lisp

Thanks for the reply ,the first answer works fine for me. – Valise

Answer 3

I'm late to the party but the other methods didn't work for me, I don't know if its because I was pulling in a list from a remote source?

In short there are 2 steps:

1. Get the value of the selected item
2. Remove that item

You can obviously make this code smaller but i've left it verbose for readability

var $select = $('#users').selectize(); 
var selectSizeControl = $select[0].selectize; 
// 1. Get the value
var selectedValue = selectSizeControl.getValue()
// 2. Remove the option 
selectSizeControl.removeOption( selectedValue )

Countersign

Answer 4

Was recently implementing this, and if you remove the last item, the input looks buggy (as mentioned above). A workaround (kind of hackish) is in the onItemRemove function, find the length of saved items, and if length == 0, use jQuery to fix the input - $('.selectize-input').css({'height':'35px'});

Striped