如何获取select2中所选选项的data- *值？ [英] how to get the data-* value of a selected option in select2?

问题描述

这就像

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

  //将第1和第3个转换为select2 
 $（'＃module，＃conditions'）。select2（）; 
 
 //使用来自数据源
 $（'select＃fields'）的数据将第二个变为select2。select2（{
占位符：'选择一个字段'，
 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
} 
] 
  

在这种情况下，我需要阅读数据 - * attribu在第3次选择（条件）上从 onChange（）事件中分配给第二个select（字段）的tes，然后对INPUT进行一些修改（但这在我身上） 。

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

解决方案

问题更多的是如何获取数据 - * 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，te xt：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 =stylesheethref =https://cdnjs.cloudflare.com/ajax/ libs / select2 / 4.0.3 / css / select2.min.css/>< script type =text / javascriptsrc =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>点击data-type值< / button>  

This is like a second part of this topic and right now I need to be able to read dynamic data-* properties from one select to the other. What this mean?

First take a look to the following image:

What you're seeing there is what the following code does:

// 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
});

As I posted in the referenced topic the data.fields has a JSON like the following:

"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"
  }
]

In this case I need to read the data-* attributes assigned to the 2nd select (field) from the onChange() event on the 3rd select (conditions) and then make some modifications to the INPUT (but this is on me).

How can I get the data-* values from any of the other select2 elements?

解决方案

The question is more of "how to get the data-* value of a selected option in select2?".

Check this example:

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- *值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！