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?

回答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.

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

回答3:

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

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

回答5:

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

This worked for me.

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

回答7:

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/

回答8:

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

回答9:

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.

回答10:

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

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

回答11:

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

回答12:

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/

回答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.

回答14:

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

回答15:

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

回答16:

User ID For element, then

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

回答17:

use this and it's gonna work:

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

来源：https://stackoverflow.com/questions/14804253/how-to-set-selected-value-on-select-using-selectpicker-plugin-from-bootstrap

标签

jquery

twitter-bootstrap

bootstrap-select