具有多个嵌套组的Select2
我在使用各种组的Select2时遇到问题，只出现后者。
2 - Gastos 2.1 - DESPESA OPERACIONAL FIXA 2.1.1 - PESSOAL 2.1.1.1 - GERENCIA/ADMINSTRATIVO 2.1.1.1.1 - SALÁRIOS 2.1.1.1.2 - DIVIDENDOS / COMISSÕES /BONUS 2.1.1.1.3 - INSS 2.1.1.1.4 - FGTS 2.1.1.1.5 - IRRF COD. 0561 2.1.1.1.6 - PLANO DE SAUDE 2.1.1.1.7 - TICKET REFEICAO 2.1.1.1.8 - VALE TRANSPORTE (...) $('select').each(function () { $(this).select2({ allowClear: true, width: 'resolve', dropdownAutoWidth: true }); }); $('#txtConta').find('option').each(function () { if ($(this).attr("value").indexOf('S') == 0) { $('').attr('label', $(this).text()).appendTo($('#txtConta')); $(this).remove(); } else { $('#txtConta').find('optGroup').last().append($(this)); } }); 你可以在这个jsfiddle中看到一个演示。
此解决方案使用select2版本4.0.1进行测试，您可以这样做：
-
传递一个包含一个属性的数组（层次结构中每个节点的级别）。 数组的结构很简单
-
创建一个函数来格式化结果，即根据层次结构内的级别看每个项目的外观
-
初始化select时，将创建的函数设置为属性templateResult
您可以在以下代码中看到：
$(document).on("ready", function() { var data = [{ id: "2", text: "2 - Gastos", level: 1 }, { id: "2.1", text: "2.1 - DESPESA OPERACIONAL FIXA", level: 2 }, { id: "2.1.1", text: "2.1.1 - PESSOAL", level: 3 }, { id: "2.1.1", text: "2.1.1 - PESSOAL", level: 4 }, { id: "2.1.1.1", text: "2.1.1.1 - GERENCIA/ADMINSTRATIVO", level: 4 }, { id: "2.1.1.1.1", text: "2.1.1.1.1 - SALÁRIOS", level: 5 }, { id: "2.1.1.1.2", text: "2.1.1.1.2 - DIVIDENDOS / COMISSÕES /BONUS", level: 5 }, { id: "2.1.1.1.3", text: "2.1.1.1.3 - INSS", level: 5 }, { id: "2.1.1.1.4", text: "2.1.1.1.4 - FGTS", level: 5 }]; function formatResult(node) { var $result = $('' + node.text + ''); return $result; }; $("#mySelect").select2({ placeholder: 'Select an option', width: "600px", data: data, formatSelection: function(item) { return item.text }, formatResult: function(item) { return item.text }, templateResult: formatResult, }); });
看看这个GitHub问题 。 重要的是
HTML本身禁止嵌套
，因此您的标记在达到Select2之前无效。 但是，当您使用JS对象表示选择时，您可以通过子项任意嵌套选择。
这意味着您可以使用children来获取多个嵌套选项。 以下解决方案和jsfiddle基于fperie的解决方案 。
使用这种解决方案，叶子仍然是可选择的。 如果您不想选择叶子，则应从叶子中删除id属性。
请参阅演示这两种配置的JSfiddle 。 请注意，我只使用了您提供的部分数据。
我这样用过。 工作得很好。
$(document).on("ready", function() { function formatResult(node) { var level = 0; if(node.element !== undefined){ level = (node.element.className); if(level.trim() !== ''){ level = (parseInt(level.match(/\d+/)[0])); } } var $result = $('' + node.text + ''); return $result; }; $("#select2").select2({ placeholder: 'Select an option', width: "300px", templateResult: formatResult, }); });
我试着在上面的Saravananpost中添加这个作为评论，但是评论的篇幅太长了，所以认为这是对他的post的扩展，并且归功于他给了我这个想法。
这是我的一篇文章，但我想扩展一下如何使用$ document.ready而不是$ document.on的更新的jquery格式实现上述解决方案。 稍微修改，因为我已经嵌套在pageLoad中，因此该函数在pageLoad之外，并且我使用了属性而不是类。 但重要的是，我必须同时使用templateResult和templateSelection来工作，因为没有后者，没有任何反应：
function pageLoad() { $(document).ready(function () { $(".multiple-group").select2({ allowClear: true, closeOnSelect: false, templateResult: formatResult, templateSelection: formatResult }); }); } function formatResult(node) { var level = 0; if (node.element !== undefined) { level = node.element.getAttribute("hierarchy-level"); if (level.trim() !== '') { level = parseInt(level) - 1; } } var $result = $('' + node.text + ''); return $result; }