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

Question

这就像的第二部分，现在我需要能够从一个 select 读取动态 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"
  }
]

在这种情况下，我需要从第 3 个 onChange() 事件中读取分配给第 2 个 select（字段）的 data-* 属性 select（条件）然后对 INPUT 进行一些修改（但这是我的事）。

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

Answer 1

问题更多 "how to get the data-* value of a selected option in select2?"。

检查这个例子：

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>

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

how to get the data-* value of a selected option in select2?

javascript

jquery

jquery-select2

jquery-select2-4

select2