Alterando a seleção em uma seleção com o plugin escolhido

105

Estou tentando mudar a opção atualmente selecionada em um select com o plugin Chosen.

A documentação cobre a atualização da lista e o disparo de um evento quando uma opção é selecionada, mas nada (que eu possa ver) em alterar externamente o valor atualmente selecionado.

Fiz um jsFiddle para demonstrar o código e minhas tentativas de alterar a seleção:

$('button').click(function() {
    $('select').val(2);
    $('select').chosen().val(2);
    $('select').chosen().select(2);
});
javascript jquery select jquery-chosen gak
fonte
Não consegui executar a demonstração do jsfiddle que você forneceu. você poderia atualizá-lo.
Lucky
OK. Não consegui executar sua demonstração porque a biblioteca escolhida estava apontando para um url incorreto. Aqui está o jsfiddle
Lucky

Respostas:

214

Na seção "Atualizando Escolhido Dinamicamente" nos documentos : Você precisa acionar o evento 'escolhido: atualizado' no campo

$(document).ready(function() {

    $('select').chosen();

    $('button').click(function() {
        $('select').val(2);
        $('select').trigger("chosen:updated");
    });

});

NOTA: as versões anteriores a 1.0 usavam o seguinte:

$('select').trigger("liszt:updated");
Lucas Welper
fonte
6
Para sua informação: eles foram atualizados para 1.0, que agora usa em chosen:updatedvez deliszt:updated
Henesnarfel
Eu tropecei aqui enquanto tentava encontrar uma maneira de selecionar a melhor opção de correspondência atual em uma lista de resultados de pesquisa escolhida por seleção múltipla (sempre que o foco foi perdido). Aqui está um pequeno violino sobre minhas explorações. Você não precisa acionar nenhum evento. Talvez seja útil para outra pessoa também ... :)
Timo
apesar de o código acima funcionar, isso acontece apenas uma vez. Quero dizer, se eu clicar novamente no menu onde o plugin escolhido está anexado, não leva o valor que está dentro de val (). Por que isso pode estar acontecendo
Dimitris Papageorgiou
9
Eu sei que este é um post antigo - mas uma maneira mais simples de atualizar é apenas em uma string: $('select').val(2).trigger("chosen:updated");
Andrew Newby
10
@Lucas Welper: você também deve mudar $('select').val(2);para $('select').val(2).change();, porque mudar a opção selecionada de um select com jQuery não aciona o evento de mudança e algumas pessoas podem precisar dele.
Machineaddict
41

Minha resposta está atrasada, mas quero acrescentar algumas informações que estão faltando em todas as respostas acima.

1) Se você deseja selecionar um valor único na escolha escolhida.

$('#select-id').val("22").trigger('chosen:updated');

2) Se você estiver usando a seleção múltipla escolhida, pode ser necessário definir vários valores de uma vez.

$('#documents').val(["22", "25", "27"]).trigger('chosen:updated');

Informações coletadas nos links a seguir:
1) Chosen Docs
2) Chosen Github Discussion

Aamir
fonte
Observando que "22", "25" etc. são os valores, não o HTML interno, por exemplo <option value = "25"> algo próximo </option>
Fadi Bakoura
2

Às vezes, você precisa remover as opções atuais para manipular as opções selecionadas.

Aqui está um exemplo de como definir opções:

<select id="mySelectId" class="chosen-select" multiple="multiple">
  <option value=""></option>
  <option value="Argentina">Argentina</option>
  <option value="Germany">Germany</option>
  <option value="Greece">Greece</option>
  <option value="Japan">Japan</option>
  <option value="Thailand">Thailand</option>
</select>

<script>
activateChosen($('body'));
selectChosenOptions($('#mySelectId'), ['Argentina', 'Germany']);

function activateChosen($container, param) {
    param = param || {};
    $container.find('.chosen-select:visible').chosen(param);
    $container.find('.chosen-select').trigger("chosen:updated");
}

function selectChosenOptions($select, values) {
    $select.val(null);                                  //delete current options
    $select.val(values);                                //add new options
    $select.trigger('chosen:updated');
}
</script>

JSFiddle (incluindo opções de como anexar): https://jsfiddle.net/59x3m6op/1/

Tobi G.
fonte
1
Para contabilizar o caso em que o select ainda não tem valor, atualize var selected = mySelect.val();para var selected = mySelect.val() || [];.
ElliotSchmelliot
0

No caso de vários tipos de seleção e / ou se você deseja remover itens já selecionados um por um, diretamente dentro de uma lista suspensa, você pode usar algo como:

jQuery("body").on("click", ".result-selected", function() {
    var locID = jQuery(this).attr('class').split('__').pop();
    // I have a class name: class="result-selected locvalue__209"
    var arrayCurrent = jQuery('#searchlocation').val();
    var index = arrayCurrent.indexOf(locID);
    if (index > -1) {
        arrayCurrent.splice(index, 1);
    }
    jQuery('#searchlocation').val(arrayCurrent).trigger('chosen:updated');
});
SlavisaPetkovic
fonte