如何清除 Selectize.js 下拉列表中的选定值？答案

【问题标题】：How to clear a selected value in Selectize.js dropdown?如何清除 Selectize.js 下拉列表中的选定值？
【发布时间】：2015-01-11 11:25:38
【问题描述】：

我有一个selectize.js 下拉菜单，我必须清除所选值。

我已经尝试过了（正如another question 中所建议的那样）：

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

但它给出了以下错误：

当我将其更改为：

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

我给出了这个错误：

我在这里做错了什么？

【问题讨论】：

如果您检查provided 中提到的docs 不正确 答案（想象一下 - 9 票赞成不正确的答案。好吧，也许答案的其他部分是正确的，但是第一个代码行是致命的错误） - 你会看到它是如何完成的。
谢谢@Regent，我把它整理好了。感谢您的帮助。
有时会发生。有时没有任何充分的理由。放轻松。不是你名声低，你知道的。我的赞成票可以补偿 2.5 次反对票。

标签： javascript jquery selectize.js

【解决方案1】：

我终于在这里找到了答案Selectize.js Demos

对我有用的是：

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

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

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

【讨论】：

此解决方案还会删除记录（清除下拉列表）。您无法再在列表中搜索。
@khan 不，它没有。刚刚检查了这个解决方案 - 它工作得很好。我仍然可以搜索并选择已清除的项目。用于检查的版本 - Selectize.js v0.12.4.

【解决方案2】：

试试这个，

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

【讨论】：

这是最好的方法，初始化时不必将selectize存储在全局变量中，在需要时调用即可。
最佳答案。在您清除输入后，您可能需要将其聚焦，以打开列表。用于：focus()。
太棒了，它对我很有用

【解决方案3】：

试试这个：- 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();

    });
});

【讨论】：

感谢您的帮助。我整理好了。 +1 为 jsfiddle。
persist 有什么作用？
@astroanu - 它说“在取消选择后是否保留选项？”基本上，作为布尔标志。来源是使用文档：github.com/selectize/selectize.js/blob/master/docs/usage.md

【解决方案4】：

所有其他答案要么清除单个选择，要么需要在创建时对选择进行特定引用。

另一方面，下面的解决方案适用于任何表单内的任意数量的选择元素；您只需要指定所需的形式：

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

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

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

【讨论】：

为此+1！但只是一个问题，这条线是什么意思？ element.selectize && element.selectize.clear()
意思是：如果element.selectize不为null或者undefined，则清除它

【解决方案5】：

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

这不会从选择中删除项目，只是从选定选项中删除它。

【讨论】：

【解决方案6】：

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

【讨论】：