Question

我想知道是否可以动态添加新值到chosen.js多选（类似于标记的工作方式）。

我在另一个SO post用户看到这是可能的。他链接到github上的example和fork，但我在执行这些方面遇到了一些困难。

源代码是用CoffeeScript编写的。我已经尝试将它（使用在线编译器）编译为常规JavaScript，将代码粘贴到空白测试项目中，但是我遇到了错误。之后，我也加载了AbstractChosen和SelectParser（将它们编译为js）并且没有得到错误，但是“动态添加项目”功能不存在（尽管我初始化了{{{ 3}}）。

有没有人使用过这个叉子？如果是的话，请你分享一下你的经历吗？

Answer 1

您遇到的问题是因为您没有按照the documentation中的步骤进行操作：

如果您下载了源代码，请安装正确的软件包并运行您使用chosen.jquery.js，chosen.proto.js和chosen.css结束的构建命令。

因此，以下步骤应该为您完成：

下载：https://github.com/koenpunt/chosen/archive/option_adding.zip
安装包：npm install && gem install bundler && bundle install
运行构建：grunt build（请注意，为此您需要grunt cli）

修改

为方便起见，download a compiled release。

Answer 2

文档提到了这个选项：

动态更新动态

如果您需要更新选择字段中的选项并想要选择   要获取更改，您需要触发“已选择：已更新”   在球场上的事件。 Chosen将根据更新后重新构建自己   内容。

有了这个。

$("#form_field").trigger("chosen:updated");

这可以与

结合使用

// Add field
$("#form_field").append("<option>Utopia</option>");

$("#form_field").trigger("chosen:updated");

可以在jsfiddle中找到将它们添加到一个示例中： http://jsfiddle.net/E5X9x/

Answer 3

解决方案是here

$('select').chosen({plugins: ['option-adding']});

或

$(function() {
  $(".chzn-select").chosen({
    create_option: true,
    // persistent_create_option decides if you can add any term, even if part
    // of the term is also found, or only unique, not overlapping terms
    persistent_create_option: true,
    // with the skip_no_results option you can disable the 'No results match..' 
    // message, which is somewhat redundant when option adding is enabled
    skip_no_results: true
  });
});

将值添加到选定的多选

3 个答案: