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

Question

I m using the Bootstrap-Select plugin like this   HTML    lt select name  selValue  class  selectpicker  gt      lt option value  1  gt Val 1 lt  option gt      lt option value  2  gt Val 2 lt  option gt      lt option value  3  gt Val 3 lt  option gt      lt option value  4  gt Val 4 lt  option gt   lt  select gt    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

User · Answer

use this and it s gonna work       select name selValue    selectpicker  val   1

User · Answer

selectpicker   selectpicker  val   YOUR VALUE

User · Answer

var bar     foo  find  option selected   val

User · Answer

mybutton   click function          select name selValue    val 1         select name selValue    change          This worked for me

User · Answer

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

User · Answer

selector   selectpicker  val  value   in place of selector you can give you selector either class or id for example      mySelect   selectpicker  val  your value

User · Answer

selectpicker   selectpicker  val    value

User · Answer

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

User · Answer

Also  you can just call this for multi-value     lt your select picker gt   selectpicker  val     value1    value2     You can find more here https   developer snapappointments com bootstrap-select methods

User · Answer

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

User · Answer

selectpicker   selectpicker  val    0      With the  0  being the value of the item you want selected

User · Answer

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

User · Answer

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  lt select gt  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  lt select gt    In the following we select the first option of the select   HTML    lt select name  selValue  class  selectpicker  gt      lt option value  CD23E546-9BD8-40FD-BD9A-3E2CBAD81A39  gt Dennis lt  option gt      lt option value  4DDCC643-0DE2-4B78-8393-33A716E3AFF4  gt Robert lt  option gt      lt option value  D3017807-86E2-4E56-9F28-961202FFF095  gt George lt  option gt      lt option value  991C2782-971E-41F8-B532-32E005F6A349  gt Ivanhoe lt  option gt   lt  select gt    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  lt select gt      select name selValue    val sVal       Force a refresh     select name selValue    selectpicker  refresh      We used this in a select with the multiple keyword  lt select multiple gt   In this case nothing is selected per default  but we wanted the first item to always be selected

User · Answer

User ID For element  then  document getElementById  selValue   value Your Value      selValue   selectpicker  refresh

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

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

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to bootstrap-select