How to set selected value on select using selectpicker plugin from bootstrap
JqueryTwitter BootstrapBootstrap SelectJquery Problem Overview
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?
Jquery Solutions
Solution 1 - Jquery
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.
Solution 2 - Jquery
$('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').
Solution 3 - Jquery
$('.selectpicker').selectpicker('val', YOUR_VALUE);
Solution 4 - Jquery
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]);
Solution 5 - Jquery
$('#mybutton').click(function(){
$('select[name=selValue]').val(1);
$('select[name=selValue]').change();
});
This worked for me.
Solution 6 - Jquery
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]);
Solution 7 - Jquery
$('selector').selectpicker('val',value);
in place of selector you can give you selector either class or id for example: $('#mySelect').selectpicker('val',your_value)
Solution 8 - Jquery
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/
Solution 9 - Jquery
$('.selectpicker').selectpicker("val", "value");
Solution 10 - Jquery
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.
Solution 11 - Jquery
var bar= $(#foo).find("option:selected").val();
Solution 12 - Jquery
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.
Solution 13 - Jquery
When you use Bootstrap Selectpicker then you should use this to get the selected option's value.
$('#membershipadmin').selectpicker("option:selected").val();
Solution 14 - Jquery
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/
Solution 15 - Jquery
$('.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
Solution 16 - Jquery
$('.selectpicker').selectpicker('val', '0');
With the '0' being the value of the item you want selected
Solution 17 - Jquery
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);
});
Solution 18 - Jquery
$('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.
Solution 19 - Jquery
User ID For element, then
document.getElementById('selValue').value=Your Value;
$('#selValue').selectpicker('refresh');
Solution 20 - Jquery
use this and it's gonna work:
$('select[name=selValue]').selectpicker('val', 1);