ti-enxame.com

Acionar uma ação após a seleção select2

Estou usando a biblioteca select2 para minha pesquisa.
Existe alguma maneira de acionar uma ação depois de selecionar um resultado de pesquisa? por exemplo. abra um pop-up ou um simples alerta 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
});
59
spyfx

Veja a seção de eventos documentation

Dependendo da versão, um dos trechos abaixo deve dar-lhe o evento que você deseja, alternativamente, basta substituir "select2-select" por "change".

Versão 4.0 +

Os eventos estão agora em formato: select2:selecting (em vez de select2-selecting)

Obrigado ao snakey pela notificação de que isso mudou a partir de 4.0

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

Versão antes de 4.0

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

Só para esclarecer, a documentação para select2-selecting diz:

select2-select Disparado quando uma escolha está sendo selecionada no menu suspenso , mas antes que qualquer modificação tenha sido feita na seleção. Este evento é usado para permitir que o usuário rejeite seleção chamando event.preventDefault ()

enquanto a mudança tem:

mudar Disparado quando a seleção é alterada.

Por isso, change pode ser mais adequado às suas necessidades, dependendo se você deseja que a seleção seja concluída e, em seguida, faça o seu evento ou, potencialmente, bloqueie a alteração.

138
Ross

Foram feitas algumas mudanças nos nomes dos eventos select2 (eu acho no v. 4 e posterior), então o '-' é alterado para este ':'.
Veja os próximos exemplos:

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

Você pode verificar todos os eventos no site de plug-in 'select2': select2 Events

16
Tarek

Funciona para mim:

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

De acordo com o meu uso acima v.4 isso vai funcionar

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

E por menos que v.4 isso vai funcionar:

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

Para acima v4

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