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

질문은 "선택 2에서 선택한 옵션의 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>