선택 후 동작 트리거 선택2

선택 후 동작 트리거 선택2

검색을 위해 select2 라이브러리를 사용하고 있습니다.
검색 결과를 선택한 후 작업을 트리거할 수 있는 방법이 있습니까? 팝업을 열거나 간단한 js 경보를 엽니다.

$("#e6").select2({
    placeholder: "Enter an item id please",
    minimumInputLength: 1,
    ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
        url: "index.php?r=sia/searchresults",
        dataType: 'jsonp',
        quietMillis: 3000,
        data: function (term, page) {
        return {
            q: term, // search term
            page_limit: 10,
            id: 10
            };
        },
        results: function (data, page) { // parse the results into the format expected by Select2.
            // since we are using custom formatting functions we do not need to alter remote JSON data
            return {results: data};
        },
    },

    formatResult: movieFormatResult, // omitted for brevity, see the source of this page
    formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page
    dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
    escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});

문서 이벤트 섹션 참조

버전에 따라 아래의 토막글 중 하나가 원하는 이벤트를 제공하거나, "select2-selecting"을 "change"로 대체하기만 하면 됩니다.

버전 4.0 +

이제 이벤트 형식이 다음과 같습니다.select2:selecting(무료로)select2-selecting)

이것이 4.0부로 변경되었다는 알림에 snicky 감사합니다.

$('#yourselect').on("select2:selecting", function(e) { 
   // what you would like to happen
});

4.0 이전 버전

$('#yourselect').on("select2-selecting", function(e) { 
   // what you would like to happen
});

명확하게 설명하자면, 다음에 대한 것입니다.select2-selecting다음과 같이 읽힙니다.

2- 드롭다운에서 선택 항목을 선택하고 있지만 선택 항목을 수정하기 전에 [발화됨]을 선택합니다.이 이벤트는 사용자가 event.preventDefault()를 호출하여 선택을 거부할 수 있도록 하는 데 사용됩니다.

반면 변화는 다음과 같습니다.

선택사항이 변경되면 변경발화됩니다.

그렇게change선택을 완료한 후 이벤트를 수행할지 또는 변경을 차단할지 여부에 따라 사용자의 요구에 더 적합할 수 있습니다.

select2 이벤트 이름이 약간 변경되었기 때문에(v.4 이상에서는 '-'가 ':'로 변경되었습니다.
다음 예를 참조하십시오.

$('#select').on("select2:select", function(e) { 
    //Do stuff
});

'select2' 플러그인 사이트에서 모든 이벤트를 확인할 수 있습니다: select2 Events

저에겐 효과가 있습니다.

$('#yourselect').on("change", function(e) { 
   // what you would like to happen
});

v.4 이상의 나의 사용법에 따라서 이것은 작동할 것입니다.

$('#selectID').on("select2:select", function(e) { 
    //var value = e.params.data;  Using {id,text format}
});

그리고 v.4 이하에서는 작동할 겁니다

$('#selectID').on("change", function(e) { 
   //var value = e.params.data; Using {id,text} format
});

v4 이상의 경우

$('#yourselect').on("select2:select", function(e) { 
     // after selection of select2 
});

이것은 나에게 효과가 있었습니다(Select 24.0.4).

$(document).on('change', 'select#your_id', function(e) {
    // your code
    console.log('this.value', this.value);
});

//when a Department selecting
$('#department_id').on('select2-selecting', function (e) {
    console.log("Action Before Selected");
    var deptid=e.choice.id;
    var depttext=e.choice.text;
    console.log("Department ID "+deptid);
    console.log("Department Text "+depttext);
});

//when a Department removing
$('#department_id').on('select2-removing', function (e) {
    console.log("Action Before Deleted");
    var deptid=e.choice.id;
    var depttext=e.choice.text;
    console.log("Department ID "+deptid);
    console.log("Department Text "+depttext);
});

언급URL : https://stackoverflow.com/questions/18615108/trigger-an-action-after-selection-select2