javascript 如何从 Selectize 中删除项目?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/26873595/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 06:37:38  来源:igfitidea点击:

How to remove an item from Selectize?

javascriptjqueryselectize.js

提问by John Thomas

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

有什么办法可以从 Selectize 中删除项目?

Here is my a sample list:

这是我的示例列表:

  1. AMNT
  2. QTY
  3. NA
  1. 阿姆特
  2. 数量
  3. 不适用

When I pass NAit should remove particular item:

当我通过时,NA它应该删除特定项目:

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

      return this;
   };

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

这是行不通的。谁能帮我这个?

回答by Micha? Samuj?o

removeItemremoves selecteditem identified by given value. To remove option from the list you should use removeOption

removeItem删除由给定值标识的选定项目。要从列表中删除选项,您应该使用removeOption

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

示例 - 打开http://brianreavis.github.io/selectize.js/,打开控制台并输入:

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

to remove Chuck Tesla from available options

从可用选项中删除 Chuck Tesla

回答by Andy Jarrett

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:

简而言之,有2个步骤:

  1. Get the value of the selected item
  2. Remove that item
  1. 获取选中项的值
  2. 删除该项目

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 )

回答by M4r14n

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

此代码不会从选择中删除项目,只是从所选选项中删除它。

回答by Tom Goldenberg

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 onItemRemovefunction, find the length of saved items, and if length == 0, use jQuery to fix the input - $('.selectize-input').css({'height':'35px'});

最近正在实现这个,如果你删除最后一个项目,输入看起来有问题(如上所述)。一个解决方法(有点hackish)在onItemRemove函数中,找到保存项目的长度,如果length == 0,使用jQuery来修复输入 -$('.selectize-input').css({'height':'35px'});