Chosen.js 下拉列表 |如何保留数据占位符？

Question

我有五个多重 select，使用 javascript 动态创建。在每个过滤器旁边，我有两个链接："all" 和 "none"。 "All" 将所有筛选器放入所选框中，以便用户更容易排除某个值。 "None" 删除所有选项。

当我使用 "all" 添加过滤器，然后手动删除它们时，数据占位符消失，我得到一个空白的过滤器框。如果我单击 "all"，然后单击 "none"，数据占位符仍然存在。如果我手动添加和删除过滤器，它仍然存在。

我能看到的唯一 DOM 区别是输入字段（div.chosen-容器 ul.chosen-选择 li.search-字段输入）通常有一个 class 共 "default"。单击 "all" 时，此 class 呈现为“”。单击 "none" 时，class 返回到 "default"。所以我认为这个 class 是罪魁祸首。在 DOM 中将 class 改回 "default" 本身没有任何效果，但我猜某些 javascript 过程取决于此 class。

我在 chosen 之上使用 chosen-material-design。但是我搜索了这个 CSS 文件和常规选择的文件以查找“.default”，但没有找到，所以我认为这不是 CSS 问题。

有谁知道是什么设置（或取消设置）这个 class？这是三个不同应用程序的问题，并且已经持续了数周。感谢您的帮助！

Javascript select 代码：

f.innerHTML += '<select id="'+filters[0][i]+'" class="chosen-select" multiple style="width:80%" data-placeholder="'+filters[1][i]+'"><option value=""></option></select>';

选择的代码：

  $(".chosen-select").chosen({
    disable_search_threshold: 10,
    allow_single_deselect: true,
    no_results_text: "Oops, nothing found!"
  });

Javascriptall/none代码：

d3.selectAll("div.all").on("click",function(){
  var whichSelect = this.id.substr(0,this.id.length-4);
  $("[id='"+whichSelect+"'] option").prop('selected',true);
  $("[id='"+whichSelect+"']").trigger('chosen:updated');

  var tempIndex = filters[0].indexOf(whichSelect);//whether it's company, portfolio, industry or country
  for (var i=0; i<filters[2][tempIndex].length; i++) { if (filters[6][tempIndex].indexOf(filters[2][tempIndex][i])==-1) { filters[6][tempIndex].push(filters[2][tempIndex][i]); }}
  filters[5][tempIndex].filterFunction(function(d){ return filters[6][tempIndex].indexOf(d)!=-1; });

  update();
});


d3.selectAll("div.none").on("click",function(){
  var whichSelect = this.id.substr(0,this.id.length-5);
  $("[id='"+whichSelect+"'] option").prop('selected',false);
  $("[id='"+whichSelect+"']").trigger('chosen:updated');
  var tempIndex = filters[0].indexOf(whichSelect);//whether it's company, portfolio, industry or country
  filters[6][tempIndex] = [];
  filters[5][tempIndex].filterAll();

  update();

});

显示数据占位符的 DOM 图像和 "default" 的 class 图像：

Answer 1

我有 updated your fiddle (revision 8)，有修复。

问题：你原来的 HTML 在选项中有一个空元素 <option value=""></option>，你的 JS 代码添加所有选项（当用户点击你的 "all" link/button) 还包括那个空选项，这会使库跳闸。

解决方案

调用 .prop('selected', true)

时应排除 option 元素

在代码方面，你这样做：

$("[id='"+whichSelect+"'] option").prop('selected',true);

不幸的是，这包括空选项。所以，改为这样做：

$("[id='"+whichSelect+"'] option:not([value=''])").prop('selected',true);
//                              ^^^^^^^^^^^^^^^^
//                              This excludes the empty option

您可以使用任何其他方式，也许向该特定元素添加 class 并使用 class 到 select 比使用select或以上。

为什么会这样？

插件存在内部一致性问题（虽然只适用于"incorrect"使用，所以只差了一半）：部分代码似乎故意忽略了这个空选项，但另一部分考虑到 selected 选项的总数。结果：根据之前的状态，这个空的和不可见的选项被计算在内，尽管输入字段看起来是空的，库计算 choices_count() = 1（而不是 0）。

看看更新这个 default class 的函数，在 chosen.jquery.js 的第 942 行：

Chosen.prototype.show_search_field_default = function() {
  if (this.is_multiple && this.choices_count() < 1 && !this.active_field) {
    this.search_field.val(this.default_text);
    return this.search_field.addClass("default");
  } else {
    this.search_field.val("");
    return this.search_field.removeClass("default");
  }
};

因为 choices_count() 是 1 而不是 0，所以 class 没有加回来，你也看不到占位符。

简而言之：确保您的代码不在 selected 项列表中包含空选项

Chosen.js 下拉列表 |如何保留数据占位符？

Chosen.js dropdowns | how preserve data-placeholder?

jquery-chosen

prototype-chosen

解决方案

为什么会这样？