HTML 使用元素在select2插件中获取自定义数据属性。

阅读更多：HTML 教程

什么是自定义数据属性？

自定义数据属性是HTML5中引入的一个功能，它允许您在HTML元素中存储自定义数据。这些数据可以以键值对的形式存储，并通过data-*属性在标签中进行定义。例如，您可以在元素定义了一个名为”custom-data”的自定义数据属性，并设置其值为”12345″。

<select id="mySelect" data-custom-data="12345">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

使用select2插件

select2是一个流行的jQuery插件，它可以将原始的元素转换为select2下拉菜单：

$(document).ready(function() {
  $('#mySelect').select2();
});

现在，您的元素中的自定义数据属性值，您需要使用jQuery的.attr()方法。

下面是一个示例代码，演示了如何获取元素和select2插件获取和使用自定义数据属性。

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
</head>
<body>

  <h1>Select2 Custom Data Attribute Example</h1>

  <select id="mySelect" data-custom-data="12345">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
  <script>
     $(document).ready(function() {$ ('#mySelect').select2();

      var customData = $('#mySelect').attr('data-custom-data');
      console.log(customData);  // 输出：12345
    });
  </script>
</body>
</html>

在这个示例中，我们首先包含了select2的CSS文件，然后创建了一个元素转换为select2下拉菜单。最后，我们使用jQuery的.attr()方法获取自定义数据属性的值，并将其打印到浏览器的控制台中。