How to set the selected value when choosing using the selectpicker plugin from bootstrap

Question

I am using the Bootstrap-Select plugin as follows:

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 for this when I click the button ... something like this:

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

But nothing happens.

How can i achieve this?

Answer 1

The value is selected correctly, but you did not see it, because the plugin hides the real choice and shows a button with an unordered list, so if you want the user to see the selected value in the selection, 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:

As @blushrt points out, the best solution:

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

Edit 2:

To select multiple values, pass the values ​​as an array.

Answer 2

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

That is all you have to do. No need to directly modify the generated html selectpicker, just change the hidden selection field and then call selectpicker ('refresh').

Answer 3

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

Answer 4

There is no need to update if the "val" parameter is used to set the value, see the script . Use parentheses for the value to include multiple selected values.

 $('.selectpicker').selectpicker('val', [1]); 

Answer 5

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

It worked for me.

Answer 6

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

As you can read from the documentation
https://silviomoreto.imtqy.com/bootstrap-select/methods/#selectpickerval

The right way to do this would be

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

For multiple values ​​you can add an array of values

 $('.selectpicker').selectpicker('val', [1 , 2]); 

Answer 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 the items in multi-select.

 $('.selectpicker').selectpicker('selectAll'); 

Details are available at: https://silviomoreto.imtqy.com/bootstrap-select/methods/

Answer 8

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

Answer 9

A slight deviation of the answer
blushrt if you don’t have hardcoded values ​​for parameters (for example, 1, 2, 3, 4, etc.)

Say you render a <select> with parameter values ​​that are GUIDs for some users. Then you need to somehow extract the parameter value to set it to <select> .

Next, we select the first option.

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 select with the multiple keyword <select multiple> . In this case, nothing is selected by default, but we wanted the first item to always be selected.

Answer 10

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

When "0" is the value of the item you want to select

Answer 11

Well, another way to do this, with this keyword, you can just get the object in it and manipulate its value. For example:

 $("select[name=selValue]").click( function() { $(this).val(1); }); 

Answer 12

Alternatively, you can simply call this for polysemous

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

You can find more here https://developer.snapappointments.com/bootstrap-select/methods/

Answer 13

Based on @blushrt's excellent answer, I will update this answer. Just using -

 $("#Select_ID").val(id); 

works if you preloaded everything you need into the selector.

Answer 14

 $('.selectpicker option:selected').val(); 

Just put option: selected to get the value, because the bootstrap selector changes to and appears differently. But choose still there chose

Answer 15

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

Answer 16

User ID For the item, then

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

Answer 17

use this and it will work:

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