我有五个多重选择,用 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 图像: