Como altero o valor selecionado do menu suspenso select2 com o JqGrid?


178

Estou usando a demo select2 do Oleg , mas estou imaginando se seria possível alterar o valor atualmente selecionado no menu suspenso.

Por exemplo, se os quatro valores carregados fossem: "Any", "Fruit", "Vegetable", "Meat"e a lista suspensa padrão "Any", como eu poderia mudar isso para "Fruit"no evento JqGrid loadComplete?

Isso é possível?

Respostas:


407

Para a versão select2> = 4.0.0

As outras soluções podem não funcionar, no entanto, os exemplos a seguir devem funcionar.

Solução 1: faz com que todos os eventos de alteração anexados sejam acionados, incluindo select2

$('select').val('1').trigger('change');

Solução 2: faz com que apenas o evento de alteração select2 seja acionado

$('select').val('1').trigger('change.select2');

Veja este jsfiddle para exemplos disso. Obrigado a @minlare pela solução 2.

Explicação:

Digamos que eu tenha um melhor amigo e escolha o nome das pessoas. Então, Bob, Bill e John (neste exemplo, presumo que o valor seja o mesmo que o nome). Primeiro eu inicializo select2 no meu select:

$('#my-best-friend').select2();

Agora eu seleciono Bob manualmente no navegador. Em seguida, Bob faz algo impertinente e eu não gosto mais dele. Portanto, o sistema desmarca Bob para mim:

$('#my-best-friend').val('').trigger('change');

Ou digamos que eu faça o sistema selecionar o próximo na lista em vez de Bob:

// I have assume you can write code to select the next guy in the list
$('#my-best-friend').val('Bill').trigger('change');  

Notas no site Select 2 (consulte Métodos obsoletos e removidos ) que podem ser úteis para outras pessoas:

.select2 ('val') O método "val" foi descontinuado e será removido no Select2 4.1. O método descontinuado não inclui mais o parâmetro triggerChange.

Você deve chamar diretamente .val no elemento subjacente. Se você precisou do segundo parâmetro (triggerChange), também deve chamar .trigger ("change") no elemento

$('select').val('1').trigger('change'); // instead of $('select').select2('val', '1');

8
Esta é a resposta certa: funciona em mono-seleção e multi-seleção
Giovanni Di Milia

4
Essa é uma solução aceitável apenas se não houver ações personalizadas vinculadas ao changeevento (como recarregar o formulário). Caso contrário, essas ações seriam chamadas de forma redundante ao serem acionadas change().
22416 van_folmert

Se isso não funcionar corretamente, adicione um setTimeout: setTimeout (function () {$ ("select"). Val ("1"). Trigger ("change");}, 1000);
Abel

@van_folmert Eu tenho o mesmo problema. Idealmente, eu quero mudar o que é mostrado selecionado, sem disparar um evento (desde que eu tenho um costume obrigado a onChange)
onebree

1
Veja minha resposta abaixo um exemplo de como resolver o problema @van_folmert
minlare

135

Olhando para os documentos select2, use os itens abaixo para obter / definir o valor.

$("#select").select2("val"); //get the value
$("#select").select2("val", "CA"); //set the value

O @PanPipes apontou que isso mudou para 4.x (faça um voto positivo abaixo). valagora é chamado diretamente

$("#select").val("CA");

Portanto, dentro loadCompletedo jqGrid, você pode obter o valor que procura e definir o valor da caixa de seleção.

Aviso dos documentos

Observe que, para usar esse método, você deve definir a função initSelection nas opções para que o Select2 saiba como transformar o ID do objeto que você passa em val () para o objeto completo que ele precisa para renderizar a seleção. Se você estiver anexando a um elemento de seleção, essa função já será fornecida.


Não parece funcionar com a demonstração que estou vendo. Não sei por que, pode ter algo a ver com a maneira como ele se conecta ao JqGrid.
Adam K Dean

1
Atualizado a resposta. Parece que você precisará adicionar manualmente essa função à inicialização do select2 para saber como lidar com a valchamada.
31413 Jack

1
@AdamKDean: Pode-se testar adicionalmente se foi <select>convertido em select2controle testando a existência da classe select2-offscreenno <select>. Todos os elementos da barra de ferramentas de pesquisa têm um ID que começa com o gs_prefixo e tem o nome como em colModel. Você pode usar getGridParampara obter colModel.
quer

Obrigado, eu consegui obter as informações do filtro, só preciso de uma maneira de defini-las após a barra de filtro ser recriada com o select2select. Vou dar outra olhada hoje, talvez com novos olhos eu conserte. Obrigado novamente. Atualização: agrupar o código em uma verificação booleana corrigiu o problema que eu estava tendo, embora parasse de atualizar a barra de pesquisa em vez de selecionar o elemento anterior novamente.
Adam K Dean


32
this.$("#yourSelector").select2("data", { id: 1, text: "Some Text" });

isso deve ser útil.


3
Exemplo de vários valores: this. $ ("# YourSelector"). Select2 ("data", [{id: 1, texto: "Some Text"}, {id: 2, text: "Some Other Text"}]);
RodneyRd

18

Isso deve ser ainda mais fácil.

$("#e1").select2("val", ["View" ,"Modify"]);

Mas verifique se os valores que você passa já estão presentes no arquivo HTMl


17

Se você deseja adicionar new value='newValue'e text='newLabel', adicione este código:

  1. Adicione nova opção a <select>:

    var opt = "<option value='newValue' selected ='selected'>" + newLabel+ " </option>";
    $(selLocationID).html(opt);
    
  2. Acionar a <select>alteração para o valor selecionado:

    $(selLocationID).val('newValue').trigger("change");

Acho isso mais limpo do que mexer com os 'dados' do select2 :) Mude o dom, deixe o select2 descobrir o resto.
Paulj 25/01

Estou testando no Safari, e esta é a única solução que realmente funciona. Os outros são mais eloquentes e eu os preferiria, mas mais do que tudo, eu prefiro código de trabalho. E é isso. :) #
David David

Muito obrigado por isso! Estou trabalhando com duas caixas selecionadas, nas quais as duas são preenchidas com o Ajax e usei propriedades de dados extras para a primeira caixa para definir o valor da segunda usando isso. Mais uma vez obrigado!!!!
26416 Sam

16

Só queria adicionar uma segunda resposta. Se você tiver processado o select como um select2 , será necessário que isso seja refletido no seu seletor da seguinte maneira:

$("#s2id_originalSelectId").select2("val", "value to select");

12

Você tem duas opções - como a resposta do @PanPipes indica que você pode fazer o seguinte.

$(element).val(val).trigger('change');

Essa é uma solução aceitável apenas se não houver ações personalizadas vinculadas ao evento de mudança. A solução que uso nessa situação é acionar um evento específico select2 que atualiza a seleção exibida select2.

$(element).val(val).trigger('change.select2');

Sim, esta é a melhor solução geral. Realmente, acho que o Select2 deve acionar o evento interno 'change.select2' automaticamente para atualizar a exibição quando o valor for alterado. Porém, isso pelo menos fornece uma maneira simples de atualizar a exibição para corresponder ao novo valor, sem acionar manipuladores de eventos de alteração personalizados.
DaveInMaine

este '$ (elemento) .val (val) .trigger (' change.select2 ');' trabalhou para mim. Obrigado @minlare.
Ray

9

Tendo alguns problemas ao definir uma opção String selecionada em um select2:

Com a opção: "opção string1 / opção" usada:

$('#select').val("string1").change(); 

MAS com uma opção com um valor: valor da opção "E" string1 / opção:

$('#select').val("E").change(); // you must enter the Value instead of the string

Espera que isso ajude alguém com o mesmo problema.


5

Se você deseja selecionar um único valor, use $('#select').val(1).change()

se você quiser selecionar vários valores, defina o valor na matriz para poder usar esse código $('#select').val([1,2,3]).change()


isso não funcionará se você inserir uma string entre colchetes.
Utkarsh Pandey

5

Para V4 Select2, se você deseja alterar o valor do select2 e a representação em texto da lista suspensa.

var intValueOfFruit = 1;
var selectOption = new Option("Fruit", intValueOfFruit, true, true);
$('#select').append(selectOption).trigger('change');

Isso definirá não apenas o valor dos bastidores, mas também a exibição de texto para o select2.

Extraído de https://select2.github.io/announcements-4.0.html#removed-methods


Tente acionar ('change.select2'). Trigger ('select2: select'); se apenas a mudança não é suficiente
Tebe

4

Meu código esperado:

$('#my-select').val('').change();

funcionando perfeitamente obrigado a @PanPipes pelo útil.


4

faça isso

 $('select#id').val(selectYear).select2();

Embora esse código possa responder à pergunta, fornecer um contexto adicional a respeito de por que e / ou como esse código responde à pergunta melhora seu valor a longo prazo.
precisa saber é o seguinte

Eu não tenho conhecimento sobre jqgrid mas com este código é possível alterar valor select2 de forma simples
Jaskaran singh Rajal

2

Se você tiver uma fonte de dados ajax, consulte-a gratuitamente.

https://select2.org/programmatic-control/add-select-clear-items

// Configure o controle Select2

$('#mySelect2').select2({
    ajax: {
        url: '/api/students'
    }
});

// Busque o item pré-selecionado e adicione ao controle

var studentSelect = $('#mySelect2');
$.ajax({
    type: 'GET',
    url: '/api/students/s/' + studentId
}).then(function (data) {
    // create the option and append to Select2
    var option = new Option(data.full_name, data.id, true, true);
    studentSelect.append(option).trigger('change');

    // manually trigger the `select2:select` event
    studentSelect.trigger({
        type: 'select2:select',
        params: {
            data: data
        }
    });
});

1

se você deseja definir um item selecionado quando conhece o texto na lista suspensa e não sabe o valor, veja um exemplo:

Digamos que você descobriu um fuso horário e deseja defini-lo, mas os valores estão time_zone_idneles.

        var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        var $select2 = $('#time-zone');
        var selected = $select2.find("option:contains('"+timeZone+"')").val();
        $select2.val(selected).trigger('change.select2'); 

0
// Set up the Select2 control
$('#mySelect2').select2({
    ajax: {
        url: '/api/students'
    }
});

// Fetch the preselected item, and add to the control
var studentSelect = $('#mySelect2');
$.ajax({
    type: 'GET',
    url: '/api/students/s/' + studentId
}).then(function (data) {
    // create the option and append to Select2
    var option = new Option(data.full_name, data.id, true, true);
    studentSelect.append(option).trigger('change');

    // manually trigger the `select2:select` event
    studentSelect.trigger({
        type: 'select2:select',
        params: {
            data: data
        }
    });
});

Fonte: Selecione 2 documentação


0

você pode simplesmente usar o método get / set para definir o valor

$("#select").select2("val"); //get the value
$("#select").select2("val", "CA"); //set the value

ou você pode fazer isso:

$('#select').val("E").change(); // you must enter the Value instead of the string
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.