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?

I'm not sure what do you want to achieve, the value is set once user click on that option in the select — Tomas Ramirez Sarduy, Feb 11 '13 at 00:27
Yes because really the value comes from a method on an ajax call... — jcvegan, Feb 11 '13 at 00:32
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 — Tomas Ramirez Sarduy, Feb 11 '13 at 00:39
Yes I know that, but how to fix it... I mean... the user must see the selection on this control — jcvegan, Feb 11 '13 at 00:40

score 186 · Accepted Answer · edited Aug 07 '18 at 07:48

186

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.

edited Aug 07 '18 at 07:48

Vignesh Raja

7,927
1
33
42

answered Feb 11 '13 at 00:53

Tomas Ramirez Sarduy

17,294
8
69
85

36

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. – Simon Polak Dec 04 '13 at 15:38
yes, this way is better @blushrt, added to my answer – Tomas Ramirez Sarduy Oct 05 '14 at 03:24
I am facing the same issue that i am unable to select preselected values which user has selected privously. – Srikanth Pullela Oct 08 '15 at 11:45
Is it necessary to refresh the selectpicker after it ?? @TomSarduy – always-a-learner May 31 '17 at 03:51
@ankitsuthar, yes – Tomas Ramirez Sarduy Mar 19 '18 at 15:02
Actually it's `$(.selectpicker').selectpicker('render');`. Refresh will change the style of the element. – Anastasios Moraitis Nov 27 '19 at 09:50
Parsing selected values as an array works for me. – Disapamok Feb 17 '21 at 06:57
Thank you! I've been searching every where trying to understand how to show the proper selected option without relying soley on the text. – RC3 Jan 20 '22 at 21:14
this no longer works it seems. 'selectpicker is not a function' error – mike01010 Aug 20 '22 at 21:24

score 83 · Answer 2 · answered Dec 04 '13 at 15:45

83

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

answered Dec 04 '13 at 15:45

Simon Polak

1,959
1
13
21

10

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. – Shawn J. Molloy Aug 29 '14 at 01:45
1

`$('.selectpicker').selectpicker('refresh');` can kill your performance if you have a lot of selectpickers on one page – Michel Dec 14 '18 at 14:43
Another problem I found is, This won't tick the selection. – Sajeer Babu Apr 11 '19 at 10:35

score 51 · Answer 3 · edited Oct 13 '15 at 07:38

51

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

edited Oct 13 '15 at 07:38

Leistungsabfall

6,368
7
33
41

answered Oct 12 '15 at 22:35

Jesterhead

519
4
2

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. – Shilpi Jaiswal Sep 19 '18 at 08:42

score 17 · Answer 4 · answered Jan 18 '16 at 09:48

17

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

answered Jan 18 '16 at 09:48

cederlof

7,206
4
45
62

score 10 · Answer 5 · answered May 21 '13 at 07:06

10

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

This worked for me.

answered May 21 '13 at 07:06

Janith Widarshana

3,213
9
51
73

score 9 · Answer 6 · answered Dec 01 '16 at 15:37

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

score 8 · Answer 7 · edited Jun 23 '20 at 12:08

8

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

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

edited Jun 23 '20 at 12:08

Yaron

1,199
1
15
35

answered Jun 23 '20 at 09:27

vivek korada

101
1
4

i get an error 'selectpicker is not a function'. – mike01010 Aug 20 '22 at 21:26

score 6 · Answer 8 · answered Jul 28 '18 at 06:10

6

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/

answered Jul 28 '18 at 06:10

Awanish Kumar

640
8
15

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. – Shilpi Jaiswal Sep 19 '18 at 08:44

score 3 · Answer 9 · answered Sep 07 '19 at 00:15

3

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

answered Sep 07 '19 at 00:15

Abd Abughazaleh

4,615
3
44
53

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");*? – Michel Xavier Apr 12 '20 at 23:08

score 3 · Answer 10 · answered Mar 04 '22 at 06:54

3

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

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

answered Mar 04 '22 at 06:54

Umair Tariq

81
3

Best solution for setup value to the bootstrap select picker i found – Mohamed Raza Jan 24 '23 at 21:43

Kristian Vinther · Answer 11 · 2015-04-29T21:01:42.240

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.

score 2 · Answer 12 · answered May 04 '19 at 12:08

2

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.

answered May 04 '19 at 12:08

Yonatan

73
8

score 2 · Answer 13 · answered Aug 20 '22 at 22:04

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

score 1 · Answer 14 · edited Apr 29 '16 at 04:49

1

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

edited Apr 29 '16 at 04:49

Shree Krishna

8,474
6
40
68

answered Apr 29 '16 at 04:41

abdul

19
3

score 1 · Answer 15 · answered Feb 10 '19 at 15:21

1

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/

answered Feb 10 '19 at 15:21

Andrew Van Beek

31
2

score 1 · Answer 16 · answered Jun 21 '19 at 06:38

1

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

answered Jun 21 '19 at 06:38

Fabio Almeida

31
2

score 1 · Answer 17 · answered Jul 09 '22 at 09:16

1

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 (anymore) as you'll always get the following error in your browser. Something must have changed since.

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

Hope this helps anyone else going crazy over this.

answered Jul 09 '22 at 09:16

MC9000

2,076
7
45
80

im still going crazy. does this work w/ 'live search'? tried the latest beta also - no luck. i am using bootstrap 5.x though – mike01010 Aug 20 '22 at 21:41

score 1 · Answer 18 · answered Jul 20 '22 at 07:47

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'

score 0 · Answer 19 · answered Dec 18 '17 at 04:15

0

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

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

answered Dec 18 '17 at 04:15

kevin3954

95
2
13

Mohd Naved · Answer 20 · 2018-10-09T05:53:16.337

0

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

edited Oct 09 '18 at 05:53

answered May 08 '18 at 06:29

Mohd Naved

448
6
20

score 0 · Answer 21 · edited May 05 '22 at 10:29

0

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

edited May 05 '22 at 10:29

Suraj Rao

29,388
11
94
103

answered May 05 '22 at 10:22

Thomas

1

score 0 · Answer 22 · answered Nov 18 '22 at 05:25

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

score -2 · Answer 23 · answered May 07 '16 at 10:17

-2

User ID For element, then

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

answered May 07 '16 at 10:17

AB Shaman

21
12

score -3 · Answer 24 · edited Nov 17 '15 at 17:20

-3

use this and it's gonna work:

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

edited Nov 17 '15 at 17:20

Chuck Conway

16,287
11
58
101

answered Oct 18 '13 at 16:02

Luciano Martins

35
4

$(...).selectpicker is not a function – MC9000 Jul 08 '22 at 20:03

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

24 Answers24

Edit:

Edit 2:

Linked