将下拉菜单转换为 select2答案

【问题标题】：Converting dropdown menu to select2将下拉菜单转换为 select2
【发布时间】：2021-10-05 12:25:39
【问题描述】：

我正在尝试创建一个数据表，用户可以在其中使用下拉菜单过滤表。第一个下拉菜单“project_select”填充了数据表列中的所有唯一值。第二个下拉菜单“hr_select”根据用户从“project_select”下拉菜单中的选择填充值。

目前，下拉菜单映射到 html 中的 span 元素。我希望将这些 span 元素转换为 select2。

这是我想要的 html 代码：

    <label for="project_select"></label><select id="project_select" class="js-example-basic-single" style="width: 10%">
    <option></option>
</select>
    <label for="hr_select"></label><select id="hr_select" class="js-example-basic-multiple" multiple="multiple" style="width:15%">
    <option></option>
</select>

但是，当我尝试用所需的 HTML 代码替换 span 元素时......它不起作用。

这是我的代码：https://jsfiddle.net/dfahsjdahfsudaf/nL6q21g9/16/

提前感谢您的帮助！

【问题讨论】：

Fiddle 中的 <span> 元素与使用 S2 选择无关。这是一个演示：https://jsfiddle.net/mj7hLd1f/。为了制作这个 Fiddle，我使用了你的 Fiddle 并进行了 3 处更改：（1）我添加了 S2 JS 和 CSS 库；（2）我给每个<select>元素一个ID；然后 (3) 我初始化了选择：$('#project_s2').select2(); 和 $('#hr_s2').select2();。这是你想要做的吗？
从那时起，您当然可以应用 Select2 自定义世界。但我的 Fiddle 只是最基本的。
抱歉 - 我忘了保存我的小提琴 - 我更新了第一条评论中的链接。
@andrewjames 非常感谢！

标签： html jquery css datatables jquery-select2

【解决方案1】：

我将我的 cmets 转换为这个问题的未来访问者的答案：

将标准选择转换为“Select2”选择所需的步骤是：

将所需的库添加到页面：

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

为每个当前的<select> 元素提供 ID：

select = $('<select id="project_s2"><option value=""></option></select>');

和：

select = $('<select id="hr_s2" multiple><option value=""></option></select>');

使用这些 ID 来初始化 Select2：

$('#project_s2').select2();
$('#hr_s2').select2();

最终结果是：

var dataSet = [{
    "Project_Name": "A",
    "ID": "65",
    "HR": "0",
  },
  {
    "Project_Name": "A",
    "ID": "65",
    "HR": "10",
  },
  {
    "Project_Name": "B",
    "ID": "65",
    "HR": "0",

  },
  {
    "Project_Name": "B",
    "ID": "65",
    "HR": "20",
  },
  {
    "Project_Name": "C",
    "ID": "65",
    "HR": "20",

  },
  {
    "Project_Name": "C",
    "ID": "65",
    "HR": "100",
  },

];

$(document).ready(function() {

  var table = $('#example').DataTable({
    data: dataSet,
    orderCellsTop: true,
    columns: [{
        data: "Project_Name"
      },
      {
        data: "ID"
      },
      {
        data: "HR"
      }
    ],
    initComplete: function() {
      this.api().columns([0, 2]).every(function() {
        var column = this;
        var colIdx = column.index();
        var node;
        var select;
        if (colIdx === 0) {
          node = $('#project_select');
          select = $('<select id="project_s2" style="width: 40%"><option value=""></option></select>');
        } else {
          node = $('#hr_select');
          select = $('<select id="hr_s2" style="width: 20%" multiple><option value=""></option></select>');
        }

        select.appendTo($(node).empty())
          .on('change', function() {
            var val = $(this).val();
            if (colIdx === 0) {
              val = $.fn.dataTable.util.escapeRegex(val);
              column.search(val ? '^' + val + '$' : '', true, false).draw();
              rebuildPositionSelect();
            } else {
              var vals = val.map(x => $.fn.dataTable.util.escapeRegex(x)).join('|');
              column.search(vals ? '^' + vals + '$' : '', true, false).draw();
            }
          });

        column.data().unique().sort().each(function(val) {
          select.append('<option value="' + val + '">' + val + '</option>')
        });

      });
      $('#project_s2').select2();
      $('#hr_s2').select2();
    }
  });

  function rebuildPositionSelect() {
    var select = $('#hr_select select').empty().append('<option value=""></option>');
    var column = table.column(2, {
      search: 'applied'
    });
    column.search('').draw();
    column.data().unique().sort().each(function(val) {
      select.append('<option value="' + val + '">' + val + '</option>');
    });
  }

});

<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
   <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

  </head>

  <body>

    <div style="margin: 20px;">

      <div>
        <span>Project: </span>
        <span id="project_select"></span>
        <span> HR: </span>
        <span id="hr_select"></span>
      </div>

      <br><br>

      <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
          <tr>
            <th>Project_Name</th>
            <th>ID</th>
            <th>HR</th>
          </tr>
        </thead>
      </table>
    </div>
  </body>
</html>

如 cmets 中所述，这是每个 Select2 下拉菜单的非常基本的设置。

要进一步自定义它们，您可以提供选项 - 例如：

$('#project_s2').select2( { 
  theme: "classic",
  placeholder: 'Select an option'
} );

最后说明：

在上面的示例中使用基本的<span> 元素，只有最小的布局/样式可能不足以满足您的需求。因此，您可能希望提供 CSS 自定义，以提供更好的整体布局。但这些更改不应影响您的 Select2 元素。

例如，添加style="width: 40%"（如上所示）会有所不同 - 但在您的具体情况下，这可能不是您想要的。

【讨论】：