具有多个嵌套组的Select2

Question

具有多个嵌套组的Select2

我在使用各种组的Select2时遇到问题,只出现后者.

<select name="txtConta" id="txtConta" data-placeholder="Selecione a conta">         
    <option value=""></option>
    <option value="S11892">2 - Gastos</option>
    <option value="S11893">2.1 - DESPESA OPERACIONAL FIXA</option>
    <option value="S11895">2.1.1 - PESSOAL</option>
    <option value="S11915">2.1.1.1 - GERENCIA/ADMINSTRATIVO</option>
    <option value="11916">2.1.1.1.1 - SAL&#193;RIOS</option>
    <option value="11917">2.1.1.1.2 - DIVIDENDOS / COMISS&#213;ES /BONUS</option>
    <option value="11918">2.1.1.1.3 - INSS</option>
    <option value="11919">2.1.1.1.4 - FGTS</option>
    <option value="11920">2.1.1.1.5 - IRRF COD. 0561</option>
    <option value="11921">2.1.1.1.6 - PLANO DE SAUDE</option>
    <option value="11922">2.1.1.1.7 - TICKET REFEICAO</option>
    <option value="11923">2.1.1.1.8 - VALE TRANSPORTE</option>
    (...)
</select>

<script>
$('select').each(function () {
    $(this).select2({
        allowClear: true,
        width: 'resolve',
        dropdownAutoWidth: true
    });
});

$('#txtConta').find('option').each(function () {
    if ($(this).attr("value").indexOf('S') == 0) {
        $('<optGroup/>').attr('label', $(this).text()).appendTo($('#txtConta'));
        $(this).remove();
    } else {
        $('#txtConta').find('optGroup').last().append($(this));
    }
});
</script>

Run Code Online (Sandbox Code Playgroud)

你可以在这个jsfiddle中看到一个演示.

Answer 1

小智 13

此解决方案使用select2版本4.0.1进行测试,您可以这样做:

传递一个包含一个属性多种(一个阵列级别的每个节点的层次结构中的).数组的结构很简单
创建一个函数来格式化结果,即根据层次结构内的级别看每个项目的外观
初始化选择时,将创建的函数设置为属性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 = $('<span style="padding-left:' + (20 * node.level) + 'px;">' + node.text + '</span>');
    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,
  });
});

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>

<html>

<head runat="server">
  <title></title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
</head>

<body>
  <select id="mySelect">
  </select>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.min.js"></script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 2

小智 7

我是这样用的。工作正常。

$(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 = $('<span style="padding-left:' + (20 * level) + 'px;">' + node.text + '</span>');
    return $result;
  };

  $("#select2").select2({
    placeholder: 'Select an option',
    width: "300px",
    templateResult: formatResult,
  });
});

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>

<html>

<head runat="server">
  <title></title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
</head>

<body>
  <select id="select2" data-placeholder="Select an option" tabindex="-1" aria-hidden="true">
  <option></option>
  <optgroup label="Base">
    <option class="level_0" value="0">Base Parent</option>
  </optgroup>
  <option class="level_1" value="11">A</option>
  <option class="level_2" value="12">Ant</option>
  <option class="level_3" value="15">Fire Ant</option>
  <option class="level_2" value="14">Apple</option>
  <option class="level_1" value="13">B</option>
</select>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 3

Luí*_*ruz 4

看看这个 GitHub 问题。重要的是

\n\n

\n
HTML 本身禁止嵌套<optgroup>，因此您的标记在到达 Select2 之前就无效。但是，当您使用 JS 对象来表示选择时，您可以通过子对象任意嵌套选择。
\n

\n\n

这意味着您可以使用它children来获取多个嵌套选项。以下解决方案和jsfiddle都是基于fperie的解决方案。

\n\n

<input name="txtConta" id="txtConta" data-placeholder="Selecione a conta" />     \n\n<script>\nvar data = [\n    {id: "2", name: "2 - Gastos", children: [\n        {id: "2.1", name: "2.1 - DESPESA OPERACIONAL FIXA", children: [\n            {id: "2.1.1", name: "2.1.1 - PESSOAL", children: [\n                {id: "2.1.1", name: "2.1.1 - PESSOAL"}, \n                {id: "2.1.1.1", name: "2.1.1.1 - GERENCIA/ADMINSTRATIVO", children: [\n                    {id: "2.1.1.1.1", name: "2.1.1.1.1 - SAL\xc3\x81RIOS"},\n                    {id: "2.1.1.1.2", name: "2.1.1.1.2 - DIVIDENDOS / COMISS\xc3\x95ES /BONUS"},\n                    {id: "2.1.1.1.3", name: "2.1.1.1.3 - INSS"},\n                    {id: "2.1.1.1.4", name: "2.1.1.1.4 - FGTS"}\n                ]}\n            ]}\n        ]}\n    ]}\n    ];\n\n$(\'#txtConta\').select2({\n    allowClear: true,\n    width: \'resolve\',\n    dropdownAutoWidth: true,\n    width: \'400px\',\n    data: {results: data, text: "name"}, \n    formatSelection: function(item) { \n        return item.name \n    }, \n    formatResult: function(item) { \n        return item.name \n    }\n});\n</script>\n

Run Code Online (Sandbox Code Playgroud)\n\n

使用此解决方案，叶子仍然是可选择的。如果您不想选择叶子，则应该id从叶子中删除该属性。

\n\n

请参阅演示这两种配置的JSfiddle。请注意，我只使用了您提供的部分数据。

\n

归档时间：	11 年，2 月前
查看次数：	19276 次
最近记录：	8 年，1 月前