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

Question

我有五个多选，用javascript动态创建。在每个过滤器旁边，我有两个链接：＆＃34; all＆＃34;和＆＃34;无＆＃34;。 ＆＃34;所有＆＃34;将所有过滤器放入所选框中，以便用户更容易排除值。 ＆＃34;无＆＃34;删除所有选项。

当我使用＆＃34; all＆＃34;添加过滤器，然后手动删除它们，数据占位符消失，我得到一个空白的过滤器框。如果我点击＆＃34;全部＆＃34;然后＆＃34;无＆＃34;，数据占位符仍然存在。如果我手动添加和删除过滤器，它会一直存在。

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

我能看到的唯一DOM差异是输入字段（div.chosen-container ul.chosen-choices li.search-field input）通常有一个＆＃34;默认＆＃34;的类。这个类被渲染＆＃34;＆＃34;点击＆＃34; all＆＃34;。点击＆＃34; none＆＃34;时，课程将返回＆＃34;默认＆＃34;。所以我觉得这堂课是罪魁祸首。将班级改回＆＃34;默认＆＃34;在DOM中没有任何影响，但我猜一些javascript进程依赖于这个类。

我在选择之上使用了选择材料设计。但我已经搜索了这个CSS文件和常规选择的文件＆＃34; .default＆＃34;而且它不存在，所以我不认为这是一个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 all / none code：

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的图像，数据占位符显示，类＃＆＃34;默认＆＃34;：

Answer 1

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

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

解决方案

在致电option

时，您应该排除.prop('selected', true)元素

就代码而言，你这样做：

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

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

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

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

为什么会这样？

插件中存在内部一致性问题（尽管它仅适用于“不正确”的使用，因此只有一半不好）：代码的某些部分似乎故意忽略了这个空选项，但另一部分将其考虑在内对于所选选项的总数。结果：取决于之前的状态，这个空＆amp;对隐形选项进行计数，尽管视觉上空输入字段，但库计算choices_count() = 1（而不是0）。

在default的第942行看到更新此chosen.jquery.js课程的功能：

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，所以不会添加类，也不会看到占位符。

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