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

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?

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.

$('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').

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

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

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

Isso funcionou para mim.

Na verdade, seu valor está definido, mas seu seletor não é atualizado

Como você pode ler na documentação
https://silviomoreto.github.io/bootstrap-select/methods/#selectpickerval

A maneira certa de fazer isso seria

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

Para vários valores, você pode adicionar uma matriz de valores

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

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/

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

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

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

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.

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.

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

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

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

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

Além disso, você pode simplesmente chamar isso para vários valores

$(<your select picker>).selectpicker("val", ["value1", "value2"])

Você pode encontrar mais aqui https://developer.snapappointments.com/bootstrap-select/methods/

$('.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

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

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

use isso e vai funcionar:

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