jquery - seleccionar - Cómo establecer el valor seleccionado en select usando el plugin selectpicker de bootstrap

selectpicker bootstrap

Question

Estoy usando el complemento Bootstrap-Select así:

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 seleccionar esto 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?

Answer 1

Bien otro otro fue hacerlo, con esta palabra clave, simplemente puede obtener el objeto en esto y manipular su valor. P.ej :

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

Answer 2

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:

Al igual que @blushrt señala, una mejor solución es:

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

Answer 3

En realidad, su valor está establecido, pero su seleccionador no se actualiza

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

La forma correcta de hacerlo sería

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

Para valores múltiples puede agregar una matriz de valores

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

Answer 4

ID de usuario para el elemento, luego

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

Answer 5

No se necesita ninguna actualización si el parámetro "val" se utiliza para establecer el valor, ver violín . Use corchetes para el valor para habilitar múltiples valores seleccionados.

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

Answer 6

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

Supongamos 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 configurarla en <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 siempre se seleccionara el primer elemento.

Answer 7

usa esto y va a funcionar:

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

Answer 8

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

Esto funcionó para mí.

Answer 9

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

Con ''0'' es el valor del artículo que desea seleccionar

Answer 10

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

Answer 11

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

Answer 12

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