select2で選択したオプションのdata- *値を取得する方法は？

Question

これはthis topicの2番目の部分と似ていますが、今は動的なdata-*のプロパティを1つの選択から別のものに読み取る必要があります。どういう意味？

// 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()イベントの3番目の選択（条件）で2番目の選択（フィールド）に割り当てられた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>