Como definir o valor selecionado na seleção usando o plugin selectpicker do bootstrap


97

Estou usando o plug - in Bootstrap-Select assim:

HTML :

<select name="selValue" class="selectpicker">
   <option value="1">Val 1</option>
   <option value="2">Val 2</option>
   <option value="3">Val 3</option>
   <option value="4">Val 4</option>
</select>

Javascript :

$('select[name=selValue]').selectpicker();

Agora, quero definir o valor selecionado para selecionar quando o botão for clicado ... algo assim:

$('#mybutton').click(function(){
   $('select[name=selValue]').val(1);
});

Mas nada acontece.

Como posso conseguir isso?


1
Não tenho certeza do que você deseja alcançar, o valor é definido quando o usuário clica nessa opção na seleção
Tom Sarduy

Sim porque realmente o valor vem de um método em uma chamada ajax ...
jcvegan

1
O valor está selecionado corretamente, mas você não o viu porque o plug-in oculta a seleção real e mostra um botão com uma lista não ordenada
Tom Sarduy

Sim, eu sei disso, mas como consertar ... quero dizer ... o usuário deve ver a seleção neste controle
jcvegan

Respostas:


148

O valor está selecionado corretamente, mas você não o viu porque o plugin esconde o real select e mostra um botão com uma lista não ordenada, então, se você quiser que o usuário veja o valor selecionado no select você pode fazer algo assim :

//Get the text using the value of select
var text = $("select[name=selValue] option[value='1']").text();
//We need to show the text inside the span that the plugin show
$('.bootstrap-select .filter-option').text(text);
//Check the selected attribute for the real select
$('select[name=selValue]').val(1);

Editar:

Como @blushrt aponta, uma solução melhor é:

$('select[name=selValue]').val(1);
$('.selectpicker').selectpicker('refresh')

Editar 2:

Para selecionar vários valores, passe os valores como uma matriz.


29
Uma solução melhor seria apenas: $('select[name=selValue]').val(1);$('.selectpicker').selectpicker('refresh');Desta forma, você está apenas alterando o select oculto, chamar o selectpicker ('atualizar') redesenha o botão.
blushrt

sim, assim é melhor @blushrt, adicionado à minha resposta
Tom Sarduy

Estou enfrentando o mesmo problema de não conseguir selecionar valores pré-selecionados que o usuário selecionou em particular.
Srikanth Pullela,

É necessário atualizar o selectpicker depois disso ?? @TomSarduy
ankit suthar

@ankitsuthar, sim
Tom Sarduy,

72
$('select[name=selValue]').val(1);
$('.selectpicker').selectpicker('refresh');

Isso é tudo que você precisa fazer. Não há necessidade de alterar o html gerado do selectpicker diretamente, apenas altere o campo de seleção oculto e, em seguida, chame o selectpicker ('atualizar').


8
Esta deve ser a resposta correta! Chamar o comando .selectpicker ('atualizar') é crucial para selecionar e atualizar o valor atual de uma lista suspensa ativada por selectpicker. Observe que chamar a atualização em TODOS os elementos .selectpicker pode ser lento. Se você conhece o objeto a operar, é preferível chamar a atualização nessa lista de seleção única.
nocarrier

$('.selectpicker').selectpicker('refresh'); pode prejudicar seu desempenho se você tiver muitos seletores em uma página
Michel

Outro problema que encontrei é que isso não marca a seleção.
Sajeer Babu

43
$('.selectpicker').selectpicker('val', YOUR_VALUE);

Eu tentei sua solução .. mas está mostrando 'nada selecionado' no meu select, embora eu tenha selecionado o valor e estou recebendo o mesmo do recurso onde estou armazenando dados.
Shilpi Jaiswal

16

Nenhuma atualização é necessária se o parâmetro "val" for usado para definir o valor, consulte violino . Use colchetes para o valor para habilitar vários valores selecionados.

$('.selectpicker').selectpicker('val', [1]); 

10
$('#mybutton').click(function(){
   $('select[name=selValue]').val(1);
   $('select[name=selValue]').change();
});

Isso funcionou para mim.



3

Você pode definir o valor selecionado chamando o método val no elemento.

$('.selectpicker').selectpicker('val', 'Mustard');
$('.selectpicker').selectpicker('val', ['Mustard','Relish']);

Isso selecionará todos os itens em uma seleção múltipla.

$('.selectpicker').selectpicker('selectAll');

detalhes estão disponíveis no site: https://silviomoreto.github.io/bootstrap-select/methods/


Eu tentei sua solução .. mas está mostrando 'nada selecionado' no meu select, embora eu tenha selecionado o valor e estou recebendo o mesmo do recurso onde estou armazenando dados.
Shilpi Jaiswal

3

$('selector').selectpicker('val',value);

no lugar do seletor, você pode fornecer o seletor de classe ou id, por exemplo: $('#mySelect').selectpicker('val',your_value)


2
var bar= $(#foo).find("option:selected").val();

1

Uma ligeira variação da resposta de blushrt para quando você não tem valores " embutidos em código" para opções (ou seja, 1, 2, 3, 4 etc.)

Digamos que você renderize um <select>com valores de opções sendo GUIDs de alguns usuários. Em seguida, você precisará extrair de alguma forma o valor da opção para defini-la no <select>.

A seguir, selecionamos a primeira opção do select.

HTML :

<select name="selValue" class="selectpicker">
   <option value="CD23E546-9BD8-40FD-BD9A-3E2CBAD81A39">Dennis</option>
   <option value="4DDCC643-0DE2-4B78-8393-33A716E3AFF4">Robert</option>
   <option value="D3017807-86E2-4E56-9F28-961202FFF095">George</option>
   <option value="991C2782-971E-41F8-B532-32E005F6A349">Ivanhoe</option>
</select>

Javascript :

// Initialize the select picker.
$('select[name=selValue]').selectpicker();

// Extract the value of the first option.
var sVal = $('select[name=selValue] option:first').val();

// Set the "selected" value of the <select>.
$('select[name=selValue]').val(sVal);

// Force a refresh.
$('select[name=selValue]').selectpicker('refresh');

Usamos isso em um select com a palavra-chave múltipla <select multiple>. Neste caso, nada é selecionado por padrão, mas queríamos que o primeiro item sempre estivesse selecionado.


1

Com base na ótima resposta de @blushrt, irei atualizar esta resposta. Apenas usando -

$("#Select_ID").val(id);

funciona se você pré-carregou tudo de que precisa no seletor.


1
$('.selectpicker').selectpicker("val", "value");

Abd, eu tenho um script php que passa o formato json para ajax onde o formato json é assim: "carro": "8", "cores": "vermelho, azul, branco"} . Neste caso, como inserir o objeto "cores" conforme verificado no selectpicker usando este método $ ('. Selectpicker'). Selectpicker ("val", "data.colors"); ?
Michel Xavier

0
$('.selectpicker').selectpicker('val', '0');

Com o '0' sendo o valor do item que você deseja selecionar


0

Bem outra maneira de fazer isso é, com esta palavra-chave, você pode simplesmente pegar o objeto no presente e manipulá-lo de valor. Por exemplo :

$("select[name=selValue]").click(
    function() {
        $(this).val(1);
    });


0
$('.selectpicker option:selected').val();

Basta colocar a opção: selecionada para obter o valor, pois o seletor de bootstrap muda para e aparece de forma diferente. Mas selecione ainda selecionado


-1

ID do usuário para o elemento, então

document.getElementById('selValue').value=Your Value;
$('#selValue').selectpicker('refresh');

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.