Запуск действия после выбора select2

79

Я использую библиотеку 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
});
Spyfx
источник
1
Вы можете выполнить привязку к событию 'change', в предоставленной вами ссылке есть раздел под названием «События» с очень длинным фрагментом кода для всех различных привязок событий.
Росс

Ответы:

170

См. Раздел событий документации

В зависимости от версии, в одном из приведенных ниже фрагментов должно быть указано нужное событие. В качестве альтернативы просто замените «select2-selection» на «change».

Версия 4.0 +

События теперь имеют формат: select2:selecting(вместо select2-selecting)

Спасибо snakey за уведомление об изменении в версии 4.0.

$('#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-selection Срабатывает, когда в раскрывающемся списке выбирается вариант, но до внесения каких-либо изменений в выбор. Это событие используется, чтобы позволить пользователю отклонить выбор путем вызова event.preventDefault ()

тогда как изменение имеет:

change Запускается при изменении выбора.

Это changeможет быть более подходящим для ваших нужд, в зависимости от того, хотите ли вы завершить выбор, а затем провести свое мероприятие или потенциально заблокировать изменение.

Росс
источник
13
События имеют другие имена в более новых версиях (например, 'select2: select'), см. Https://select2.github.io/examples.html
snakey
1
События здесь, в док. Неочевидно в стиле FAQ.
Pierre de LESPINAY
1
вызов "выбора" выполняется непосредственно перед установкой значения. что приведет к тому, что "console.log ($ (this) .val ())" выведет пустое значение
Joseph Groot Kormelink
Когда я попробовал то же самое в своем приложении angular, он давал мне неправильные значения. Предположим, что в параметрах select2 есть 4 значения. 1 минута, 5 минут, 1 час, ежедневно. Теперь с помощью $ ('# yourselect'). On ("select2-selection", function (e) {...} Он давал мне предыдущее значение, которое я выбрал.
Яш Джайн
Вместо этого я попробовал $ ('# yourselect'). On ("select2-select"), function (e) {...} У меня это сработало
Яш Джайн
25

Были внесены некоторые изменения в имена событий select2 (я думаю, что в версии 4 и более поздних), поэтому '-' заменен на ':' .
См. Следующие примеры:

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

Вы можете проверить все события на сайте плагина select2 : select2 Events

Тарек
источник
13

Меня устраивает:

$('#yourselect').on("change", function(e) { 
   // what you would like to happen
});
Роби Соттини
источник
Я не понимаю, почему, но это сработало для меня, когда ответа Тарека нет. Я даже получил его ответ на работу в отдельном проекте, но по какой-то причине это было единственное переопределение, благодаря которому мой проект заработал.
tokyo0709
@ tokyo0709 Это работает, потому что .changeсобытие наступает позже в серии казней, чем select2:selectсобытие. Для меня я пытался захватить css select на, select2:selectно даже если я видел его в инспекторе, я не мог его захватить select2:select- когда я переключился на .changeнего, он работал, потому что Select2 запускает select2:selectсобытие перед обновлением css для исходного выбора ... немного безумно , по-моему.
a20
1
@ a20 иногда простой обходной путь - установка css элементов dom через html css, чтобы вам не приходилось ждать, пока движок javascript догонит. В некоторых случаях это работает хорошо.
yardpenalty.com
7

Согласно моему использованию выше v.4, это будет работать

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

И для версии ниже 4 это будет работать:

$('#selectID').on("change", function(e) { 
   //var value = e.params.data; Using {id,text} format
});
amku91
источник
У меня это не сработало. Я изменил приведенный выше код на приведенный ниже. e.params.args.data
Тушар Саксена
У меня это тоже не сработало, e.params.data через поле данных не найдено для undefined. При ближайшем рассмотрении не было установлено поле params для e. Для моей проблемы мне просто нужно было прочитать значение, поэтому мне было достаточно e.val.
NemyaNation
2

Для выше v4

$('#yourselect').on("select2:select", function(e) { 
     // after selection of select2 
});
Шуджат Мунавар
источник
0
//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);
});
Ума Шанкар Пандей
источник