Chosen.js 下拉菜单 |如何保存数据占位符？

Question

我有五个多重选择，使用 javascript 动态创建。在每个过滤器旁边，我有两个链接：“全部”和“无”。 “全部”将所有过滤器放入所选框中，以便用户更轻松地排除某个值。 “无”删除所有选项。

当我使用“全部”添加过滤器，然后手动删除它们时，数据占位符消失并且我得到一个空白过滤器框。如果我单击“全部”然后单击“无”，则数据占位符仍然存在。如果我手动添加和删除过滤器，它仍然存在。

https://jsfiddle.net/09bmrq31/6/

我能看到的唯一 DOM 区别是输入字段（div.chosen-container ul.chosen-choices li.search-field 输入）通常具有“默认”类。单击“全部”时，此类会呈现“”。单击“无”时，该类返回“默认”。所以我认为这门课是罪魁祸首。将 DOM 中的类改回“默认”本身没有任何影响，但我猜一些 javascript 进程依赖于这个类。

我在选择的基础上使用选择的材料设计。但我已经在这个 CSS 文件和常规选择的文件中搜索了“.default”，但它不存在，所以我认为这不是 CSS 问题。

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

Javascript 选择代码：

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!"
  });

Javascript 全部/无代码：

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 图像：

Answer 1

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

问题：您的原始 HTML 在选项中有一个空元素 <option value=""></option>，而您添加所有选项的 JS 代码（当用户单击您的“全部”链接/按钮时）也包含该空选项，这会使图书馆。

解决方案

你应该在调用.prop('selected', true)时排除option元素

就代码而言，您可以这样做：

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

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

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

您可以使用任何其他方式，也许向该特定元素添加一个类更容易，并且使用该类来选择它比使用上面的选择器更容易。

---

为什么会这样？

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

看看更新这个default类的函数，在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，所以类没有加回来，你也看不到占位符。

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