1. ホーム
  2. jquery

[解決済み] 選択後にアクションを起こす select2

2023-06-22 09:52:29

質問

私は 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
});

どのように解決するのですか?

以下の ドキュメンテーションのイベントセクション

バージョンによりますが、以下のスニペットのうちの1つが欲しいイベントを与えてくれるはずです。代わりに、"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 を読み取ります。

選択2-選択中 ドロップダウンで選択されているときに実行されます。 ドロップダウンで選択されているとき、しかし、選択内容に変更が加えられる前に発生します。 このイベントは、ユーザが選択を拒否できるようにするために イベント.preventDefault()

があるのに対し、changeは

<ブロッククオート

変更 選択範囲が変更されたときに発行されます。

そのため change は、選択を完了させてからイベントを実行したいのか、あるいは変更をブロックする可能性があるのかによって、ニーズにより適切な場合があります。