web-dev-qa-db-ja.com

選択後にアクションをトリガーするselect2

私は検索に 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
});
jquerysearchjquery-select2
67
spyfx

ドキュメントイベントセクション を参照してください

バージョンに応じて、以下のスニペットのいずれかが必要なイベントを提供する必要があります。あるいは、「select2-selecting」を「change」に置き換えるだけです。

バージョン4.0 +

イベントは次の形式になりました：select2:selecting（select2-selectingの代わりに）

4.0の時点でこれが変更されたことを通知してくれたsnakeyに感謝します。

$('#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のドキュメントは次のとおりです。

select2-selectingドロップダウンで選択肢が選択されているときに、選択が変更される前に発生します。このイベントを使用して、ユーザーがevent.preventDefault（）を呼び出して選択を拒否できるようにします

一方、変更には以下が含まれます。

選択が変更されたときに発生します。

したがって、選択を完了してからイベントを実行するか、変更をブロックするかによって、changeがニーズにより適している場合があります。

149
Ross

Select2イベント名にいくつかの変更が加えられたため（v。4以降と思います）、 '-'はこれに変更されます '：'。
次の例を参照してください。

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

「select2」プラグインサイトですべてのイベントを確認できます。 select2 Events

19
Tarek

わたしにはできる：

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

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
});
2
amku91

上記のv4の場合

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