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?

Murtha

I'm not sure what do you want to achieve, the value is set once user click on that option in the select – Crossgrained

Yes because really the value comes from a method on an ajax call... – Murtha

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 – Crossgrained

Yes I know that, but how to fix it... I mean... the user must see the selection on this control – Murtha

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.

Crossgrained

A better solution would just be: $('select[name=selValue]').val(1);$('.selectpicker').selectpicker('refresh'); This way you are only changing the hidden select, callling selectpicker('refresh') redraws the button. – Tuyere

yes, this way is better @blushrt, added to my answer – Crossgrained

I am facing the same issue that i am unable to select preselected values which user has selected privously. – Hagio

Is it necessary to refresh the selectpicker after it ?? @TomSarduy – Siliqua

@ankitsuthar, yes – Crossgrained

Actually it's $(.selectpicker').selectpicker('render');. Refresh will change the style of the element. – Virgievirgil

Parsing selected values as an array works for me. – Estellestella

Thank you! I've been searching every where trying to understand how to show the proper selected option without relying soley on the text. – Nab

this no longer works it seems. 'selectpicker is not a function' error – Relations

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

Tuyere

This should be the correct answer! Calling the .selectpicker('refresh') command is crucial to selection and update the current value of a selectpicker powered dropdownlist. Please note, calling refresh on ALL .selectpicker elements can be slow. If you konw the object to operate- its preferred to call refresh on that single select list. – Burtburta

$('.selectpicker').selectpicker('refresh'); can kill your performance if you have a lot of selectpickers on one page – Insurgent

Another problem I found is, This won't tick the selection. – Tarrel

Answer 3

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

Abbreviated

I have tried your solution.. but its showing 'nothing selected' in my select, though I have selected value and I am getting same from resource where i am storing data. – Betty

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

Tamelatameless

Answer 5

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

This worked for me.

Chondrite

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

Caputto

Answer 7

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

in place of selector you can give you selector either class or id for example: $('#mySelect').selectpicker('val',your_value)

Stylographic

i get an error 'selectpicker is not a function'. – Relations

Answer 8

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/

Elson

I have tried your solution.. but its showing 'nothing selected' in my select, though I have selected value and I am getting same from resource where i am storing data. – Betty

Answer 9

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

Katykatya

Abd, i have php script that pass json format to ajax where the json format is like that: "car":"8","colors":"red,blue,white"}. In this case how can insert the object "colors" as checked inside selectpicker using this method $('.selectpicker').selectpicker("val", "data.colors");? – Pentylenetetrazol

Answer 10

When you use Bootstrap Selectpicker then you should use this to get the selected option's value.

$('#membershipadmin').selectpicker("option:selected").val();

Decury

Best solution for setup value to the bootstrap select picker i found – Saponify

Answer 11

Not a single one of these solutions helped. In my case, i was using Bootstrap 5.x and v1.14.x of boostrap-select.

In case it helps anyone else the solution was to make sure jquery was loaded before bootstrap-select. when that is done, this works

$('#sel_control').selectpicker('val','1010');

Relations

this solves the issue – Saponify

Answer 12

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.

Shirr

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.

Retaliation

Answer 14

This will not trigger an onChange on picker element (if any):

$(element).val(myVal)
$(element).selectpicker('refresh')

If on change is to be also triggered:

$(element).val(myVal)
$(element).selectpicker('refresh').trigger('change') // also trigger 'change'

Decigram

Answer 15

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

Iny

Answer 16

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/

Averroes

Answer 17

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

Rouleau

Answer 18

What worked for me, perfectly, every time was the following (Bootstrap 3.4.1):

   $("#myDropDown").val(MyDropDownValue).change();

as in:

   $("#ddlSalutations").val(data.SalutationID).change();

None of the methods posted here work (any more) as you'll always get the following error in your browser. Something must have changed since.

Uncaught TypeError: $(...).selectpicker is not a function

Whittaker

im still going crazy. does this work w/ 'live search'? tried the latest beta also - no luck. i am using bootstrap 5.x though – Relations

Answer 19

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

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

Hammered

Answer 20

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

Doublebank

Answer 21

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

works fine.

But

var variable = '2' 

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

is not working with Bootstrap 5. In BS 4 it works.

Methoxychlor

Answer 22

simply add an option before the other option so it will be automatically appended

<select name="class" class="form-control selectpicker" data-live-search="true">
   <option value="" selected>I am default selected text</option>
   <option value="9a">9A</option>
   <option value="9b">9B</option>
</select>

note: empty option will not considered, it will display Nothing selected from plugin

Geraud

Answer 23

User ID For element, then

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

Evade

Answer 24

use this and it's gonna work:

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

Kerstin

$(...).selectpicker is not a function – Whittaker