如何清除选定的值selectize.js下拉列表

Question

我有一个selectize.js下拉菜单＆amp;我必须清除所选的值。

我试过了：

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

正如另一个问题 How do I set the selectize.js option List programmatically 中所述。但它给出了一个错误，

Uncaught TypeError: Cannot read property 'selectize' of undefinedmessage: "Cannot read property 'selectize' of undefined"stack: (...)get stack: function () { [native code] }arguments: nullcaller: nulllength: 0name: ""prototype: StackTraceGetterconstructor: function () { [native code] }__proto__: Object__proto__: function Empty() {}<function scope>set stack: function () { [native code] }__proto__: Error

当我将其更改为：

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

我提出错误：

TypeError: undefined is not a functionmessage: "undefined is not a function"stack: (...)get stack: function () { [native code] }set stack: function () { [native code] }__proto__: Error VM1253:3(anonymous function) VM1253:3InjectedScript._evaluateOn VM1251:732InjectedScript._evaluateAndWrap VM1251:665InjectedScript.evaluate VM1251:579

我在这里做错了什么？

Answer 1

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

对我有用的是：

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

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

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

Answer 2

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

    });
});

Answer 3

试试这个，

public class Server implements Serializable {

    private String serverIp;

    public String getServerIp() {
        return serverIp;
    }

    public void setServerIp(String serverIp) {
        this.serverIp = serverIp;
    }

}

Answer 4

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

这不会从选择中删除该项目，只需将其从所选选项中删除。

Answer 5

或者，如果您有多项选择，并且确实要还原下拉列表中的选定项目（将“ hide selected”设置为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();

Answer 6

所有其他答案要么清除单个选择，要么在创建时需要特定参考。

另一方面，下面的解决方案适用于任何形式的选择元素。您只需要指定所需的形式：

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

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

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