Reputation: 3170

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

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?

Upvotes: 127

Answers (24)

MC9000

Reputation: 2403

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

Upvotes: 1

Hadayat Niazi

Reputation: 2470

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

Upvotes: 0

mike01010

Reputation: 6038

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

Upvotes: 3

Shivam Jha

Reputation: 4462

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'

Upvotes: 2

Thomas

Reputation: 1

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

Upvotes: 0

Umair Tariq

Reputation: 91

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

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

Upvotes: 3

vivek korada

Reputation: 101

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

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

Upvotes: 8

Abd Abughazaleh

Reputation: 5495

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

Upvotes: 3

Fabio Almeida

Reputation: 31

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

Upvotes: 1

Yonatan

Reputation: 73

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.

Upvotes: 2

Andrew Van Beek

Reputation: 41

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/

Upvotes: 2

Mohd Naved

Reputation: 458

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

Upvotes: 0

Tomas Ramirez Sarduy

Reputation: 17471

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.

Upvotes: 194

Awanish Kumar

Reputation: 640

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/

Upvotes: 6

kevin3954

Reputation: 95

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

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

Upvotes: 0

Hillar Kapsta

Reputation: 135

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

Upvotes: 9

AB Shaman

Reputation: 21

User ID For element, then

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

Upvotes: -2

abdul

Reputation: 19

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

Upvotes: 1

cederlof

Reputation: 7383

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

Upvotes: 19

Luciano Martins

Reputation: 35

use this and it's gonna work:

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

Upvotes: -3

Jesterhead

Reputation: 529

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

Upvotes: 52

Kristian Vinther

Reputation: 608

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.

Upvotes: 2

Simon Polak

Reputation: 1979

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

Upvotes: 85

Janith Widarshana

Reputation: 3483

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

This worked for me.

Upvotes: 11

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

Answers (24)

Edit:

Edit 2:

Related Questions