javascript - 如何获取 select2 中所选选项的 data-* 值？

Question

这就像 this topic 的第二部分现在我需要能够从一个选择到另一个选择读取动态 data-* 属性。这意味着什么？

首先看一下下面的图片:

您所看到的是以下代码的作用:

// This turn 1st and 3rd into select2
$('#module, #conditions').select2();

// This turn 2nd into select2 using data from a datasource
$('select#fields').select2({
   placeholder: 'Select a field',
   data: data.fields
});

正如我在引用的主题中发布的那样，data.fields 具有如下所示的 JSON:

"fields": [
  {
    "id": "companies_id",
    "text": "companies_id",
    "data-type": "int"
  },
  {
    "id": "parent_companies_id",
    "text": "parent_companies_id",
    "data-type": "int"
  },
  {
    "id": "client_of_companies_id",
    "text": "client_of_companies_id",
    "data-type": "int"
  },
  {
    "id": "asset_locations_id",
    "text": "asset_locations_id",
    "data-type": "int"
  },
  {
    "id": "companies_name",
    "text": "companies_name",
    "data-type": "varchar"
  },
  {
    "id": "companies_number",
    "text": "companies_number",
    "data-type": "varchar"
  }
]

在这种情况下，我需要从第三个选择(条件)的 onChange() 事件中读取分配给第二个选择(字段)的 data-* 属性然后对 INPUT 进行一些修改(但这由我负责)。

如何从任何其他 select2 元素获取 data-* 值？

Answer 1

问题更多的是“如何获取 select2 中选定选项的 data-* 值？”。

检查这个例子:

var $example = $("#s1").select2({
  data: [
    {
      "id": "companies_id",
      "text": "companies_id",
      "data-type": "int",
      "data-extra": '1'
    },
    {
      "id": "parent_companies_id",
      "text": "parent_companies_id",
      "data-type": "int",
      "data-extra": '2'
    },
    {
      "id": "client_of_companies_id",
      "text": "client_of_companies_id",
      "data-type": "int",
      "data-extra": '3'
    },
    {
      "id": "asset_locations_id",
      "text": "asset_locations_id",
      "data-type": "int",
      "data-extra": '4'
    },
    {
      "id": "companies_name",
      "text": "companies_name",
      "data-type": "varchar",
      "data-extra": '5'
    },
    {
      "id": "companies_number",
      "text": "companies_number",
      "data-type": "varchar",
      "data-extra": '6'
    }
  ],
}).on('select2:select', function(e) {
  console.log(e.params.data['data-type'], e.params.data['data-extra']);
});
$('button').click(function() {
  option_el = $('#s1 :selected');
  data = option_el.data('data')
  
  console.log(data['data-type'])
  console.log(data['data-extra'])
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>
<select id="s1">
</select>
<br />
<br />
<button>Click to the the `data-type` value</button>