Cómo establecer el valor seleccionado en seleccionar usando el complemento selectpicker de bootstrap

Estoy usando el complemento Bootstrap-Select de esta manera:

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

Ahora quiero establecer el valor seleccionado para esta selección cuando se hace clic en el botón ... algo como esto:

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

Pero nada pasa.

¿Cómo puedo conseguir esto?

El valor está seleccionado correctamente, pero no lo vio porque el complemento oculta la selección real y muestra un botón con una lista desordenada, por lo que, si desea que el usuario vea el valor seleccionado en la selección, puede hacer algo como esto :

//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 señala @blushrt, una mejor solución es:

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

Edición 2:

Para seleccionar varios valores, pase los valores como una matriz.

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

Esto es todo lo que necesitas hacer. No es necesario cambiar el html generado de selectpicker directamente, simplemente cambie el campo de selección oculto y luego llame al selectpicker ('actualizar').

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

No es necesario actualizar si se usa el parámetro "val" para establecer el valor, ver violín . Utilice corchetes para el valor para habilitar varios valores seleccionados.

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

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

Esto funcionó para mí.

En realidad, su valor está establecido, pero su selector de selección no se actualiza

Como puede leer en la documentación
https://silviomoreto.github.io/bootstrap-select/methods/#selectpickerval

La forma correcta de hacer esto sería

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

Para varios valores, puede agregar una matriz de valores

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

Puede establecer el valor seleccionado llamando al método val en el elemento.

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

Esto seleccionará todos los elementos en una selección múltiple.

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

los detalles están disponibles en el sitio: https://silviomoreto.github.io/bootstrap-select/methods/

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

en lugar de selector, puede darle selector ya sea class o id, por ejemplo: $('#mySelect').selectpicker('val',your_value)

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

Una ligera variación de blushrt's respuesta para cuando no tiene valores "codificados" para las opciones (es decir, 1, 2, 3, 4, etc.)

Digamos que renderiza un <select>con valores de opciones que son GUID de algunos usuarios. Luego, deberá extraer de alguna manera el valor de la opción para establecerla en el <select>.

A continuación, seleccionamos la primera opción de la selección.

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 esto en una selección con la palabra clave múltiple <select multiple>. En este caso, no se selecciona nada por defecto, pero queríamos que el primer elemento siempre estuviera seleccionado.

Basado en la gran respuesta de @blushrt, actualizaré esta respuesta. Solo usando -

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

funciona si ha precargado todo lo que necesita en el selector.

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

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

Con el '0' siendo el valor del elemento que desea seleccionar

Bueno, otra forma de hacerlo es, con esta palabra clave, simplemente puede obtener el objeto en este y manipular su valor. P.ej :

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

Además, puede llamar a esto para varios valores

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

Puede encontrar más aquí https://developer.snapappointments.com/bootstrap-select/methods/

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

Simplemente coloque la opción: seleccionada para obtener valor, porque el selector de selección de arranque cambia ay aparece de manera diferente. Pero seleccione todavía allí seleccionado

ID de usuario para el elemento, luego

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

usa esto y funcionará:

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