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"> <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?

20 Answers

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.

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

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

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

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

This worked for me.

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

As you can read from documentation

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

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

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

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 :

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

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"> <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.

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

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.

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

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

Also, you can just call this for multi-value

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

You can find more here

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

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

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

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

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

User ID For element, then

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

use this and it's gonna work:

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