Javascript 如何清除 Selectize.js 下拉列表中的选定值?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/26923751/
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-08-22 23:31:47  来源:igfitidea点击:

How to clear a selected value in Selectize.js dropdown?

javascriptjqueryselectize.js

提问by Pranav Singh

I have a selectize.jsdropdown and I have to clear the selected value .

我有一个selectize.js下拉列表,我必须清除选定的值。

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?


我在这里做错了什么?

回答by Pranav Singh

I finally found the answer here Selectize.js Demos

我终于在这里找到了答案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.

var $select = $('#optionNetFlow').selectize();在应用上述问题答案中提供的解决方案之前,我缺少什么。

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

现在我要在控制台中获取所有功能,例如:

enter image description here

在此处输入图片说明

回答by Aditya Singh

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

试试这个:- http://jsfiddle.net/adiioo7/2gnq1ruv/204/

JS:-

JS:-

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

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

    });
});

回答by keeno

Try this,

尝试这个,

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

回答by sandre89

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:

另一方面,下面的解决方案适用于您在任何表单中拥有的任意数量的 selectize 元素;您只需要指定所需的形式:

$('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 .selectizeproperty of the DOM element and adds a CSS class selectizedto it.

基本原理是 Selectize 保留 DOM 中的原始元素(隐藏它),.selectize在 DOM 元素的属性上添加对 selectize 的引用,并向其添加 CSS 类selectized

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

因此该解决方案找到所有具有 CSS 类的元素selectized,循环遍历它们并调用element.selectize.clear().

回答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);
    // 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.

这不会从选择中删除项目,只是从选择的选项中删除它。

回答by Andriy

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

或者,如果您有多项选择,并且确实希望恢复下拉列表中的选定项目(隐藏选定设置为 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();