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

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?

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');

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.

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

isso deve ser útil.

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

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");

Só queria adicionar uma segunda resposta. Se você já 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");

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');

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.

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()

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

Meu código esperado:

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

funcionando perfeitamente obrigado a @PanPipes pelo útil.

faça isso

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

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

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'); 

// 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

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