如何清除 Select2 中的选定值

Posted 2023-05-07

【中文标题】如何清除 Select2 中的选定值

【英文标题】：How to clear the selected values in Select2

【发布时间】：2014-12-26 05:42:13

【问题描述】：

我正在开发一个有选择元素的 Web 应用程序。我将它绑定到一个集合。我正在使用淘汰赛来做到这一点。

这是我的代码：

    <select multiple class="form-control input-sm"
                                    data-bind="options: ConfigurationParameters ,optionsValue: 'Bit63', optionsText: 'DisplayText', selectedOptions: SelectedConfigParams,select2:  placeholder: 'Choose...' "></select>

这是我的绑定处理程序：

    ko.bindingHandlers.select2 = 
init: function (element, valueAccessor) 
    var options = ko.toJS(valueAccessor()) || ;
    setTimeout(function () 
        $(element).select2(options);
    , 0);
  ,
    update: function (element, valueAccessor, allBindings) 
    console.log("update called");

;

我还有其他所有具有类似功能的选择元素。当用户选择所需信息并单击提交时，我将数据保存到数据库中。完成此操作后，我需要清除选择框中的值。我编写了一个代码来删除“SelectedConfigParams”中的所有元素。但是这些值并没有从选择元素中删除。在图像中，您可以看到，在清除选定的选项后，选择元素仍然显示先前选择的值。 （SelectedConfigParams 是一个 ko.observableArray()）。

【问题讨论】：

什么是jQuery的select2？请添加更多代码，理想情况下，也是一个小提琴。至少是 html、jQuery 的 select2（或对它的作用的解释）、模型和对 applyBindings 的调用。如果没有，就无法帮助您

@JotaBe 请查看此链接。 ivaynberg.github.io/select2 这是我的第一个 Web 应用程序（也是 Knockout 的新手）。

所有必需的信息都是回答您的问题所必需的。请将其添加到您的问题中，否则它可能会被关闭为“不清楚您的要求”。不要将此信息添加为评论

【参考方案1】：

当您创建自定义绑定时，您需要指定两个不同的函数：

init：在绑定完成时调用一次。您应该使用它来添加事件处理程序，并为元素设置默认属性，应用 jQuery 插件... update：在 init 之后以及任何使用的 observable 或计算的 observable 更改时调用。可通过valueAccessor 访问可观察对象，这允许您获取在bindingName: 之后指定的值或可观察对象，或通过任何其他参数（allBindings, viewModel, bindingContext）。您应该根据新的可观察值更新此函数中元素的状态、应用的插件等

那么，你需要做的是：

创建init函数来初始化select2 创建update函数来改变select2插件的状态 在您的视图模型中创建一个可观察对象并使用您的自定义绑定将其绑定到您的元素（这将调用 init，并使用可观察对象的初始值进行更新） 在您的视图模型中修改 observable。当您这样做时，您的 binder 的 update 函数将被调用，以便您的元素或插件的状态可以更新

请参阅Knockout's custom binding docs 了解更多信息。

【讨论】：

我已经更新了问题中的 bindingHandler。每次“SelectedConfigParams”集合更改时都不会调用更新。根据您的说法，每次我选择的选项集合更改时都应该调用 update 对吗？