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

— 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

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