How to set selected value on select using selectpicker plugin from bootstrap

Question

I'm using the Bootstrap-Select plugin like this:

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

Now I want to set the value selected to this select when button clicked... something like this:

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

But nothing happens.

How can I achieve this?

Answer 1

The value is correctly selected, but you didn't see it because the plugin hide the real select and show a button with an unordered list, so, if you want that the user see the selected value on the select you can do something like this:

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

Edit:

Like @blushrt points out, a better solution is:

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

Edit 2:

To select multiple values, pass the values as an array.

Answer 2

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

This is all you need to do. No need to change the generated html of selectpicker directly, just change the hidden select field, and then call the selectpicker('refresh').

Answer 3

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

Answer 4

No refresh is needed if the "val"-parameter is used for setting the value, see fiddle. Use brackets for the value to enable multiple selected values.

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

Answer 5

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

This worked for me.

Answer 6

Actually your value is set, but your selectpicker is not refreshed

As you can read from documentation
https://silviomoreto.github.io/bootstrap-select/methods/#selectpickerval

The right way to do this would be

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

For multiple values you can add array of values

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

Answer 7

You can set the selected value by calling the val method on the element.

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

This will select all items in a multi-select.

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

details are available on site : https://silviomoreto.github.io/bootstrap-select/methods/

Answer 8

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

Answer 9

A slight variation of blushrt's answer for when you do not have "hard coded" values for options (i.e. 1, 2, 3, 4 etc.)

Let's say you render a <select> with options values being GUIDs of some users. Then you will need to somehow extract the value of the option in order to set it on the <select>.

In the following we select the first option of the 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');

We used this in a select with the multiple keyword <select multiple>. In this case nothing is selected per default, but we wanted the first item to always be selected.

Answer 10

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

With the '0' being the value of the item you want selected

Answer 11

Well another way to do it is, with this keyword, you can simply get the object in this and manipulate it's value. Eg :

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

Answer 12

Also, you can just call this for multi-value

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

You can find more here https://developer.snapappointments.com/bootstrap-select/methods/

Answer 13

Based on @blushrt 's great answer I will update this response. Just using -

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

works if you've preloaded everything you need to the selector.

Answer 14

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

Just put option:selected to get value, because the bootstrap selectpicker change to and appear in diferent way. But select still there selected

Answer 15

User ID For element, then

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

Answer 16

use this and it's gonna work:

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