JQuery select2 set default value from an option in list

Question

I want to be able to set the default selected value of a select element using the JQuery Select2 plugin

User · Answer

Step 1  You need to append one blank option with a blank value in your select tag  Step 2  Add data-placeholder attribute in select tag with a placeholder value HTML  lt select class  quot select2 quot  data-placeholder  --Select--  gt     lt option value    gt --Select-- lt  option gt     lt option value  1  gt Option 1 lt  option gt     lt option value  2  gt Option 2 lt  option gt     lt option value  3  gt Option 3 lt  option gt   lt  select gt   Jquery     select2   select2       placeholder    this  data  placeholder        OR     select2   select2       placeholder   Custom placeholder text

User · Answer

The above solutions did not work for me  but this code from Select2 s own website did      select   val  US       Select the option with a value of  US     select   trigger  change       Notify any JS components that the value changed   Webpage found here  Hope this helps for anyone who is struggling  like I was

User · Answer

Came from the future  Looking for the ajax source default value        Set up the Select2 control     mySelect2   select2       ajax            url    api students                Fetch the preselected item  and add to the control var studentSelect       mySelect2      ajax       type   GET       url    api students s     studentId    then function  data           create the option and append to Select2     var option   new Option data full name  data id  true  true       studentSelect append option  trigger  change            manually trigger the  select2 select  event     studentSelect trigger           type   select2 select           params                data  data                         You re welcome   Reference  https   select2 org programmatic-control add-select-clear-items preselecting-options-in-an-remotely-sourced-ajax-select2

User · Answer

For 4 x version          select2Id   val   INDEX    trigger  change      to select value with INDEX      select2Id   val     trigger  change      to select nothing  show placeholder if it is

User · Answer

For ajax select2 multiple select dropdown i did like this       preset element values     topics is an array of format    id      text                        id  val topics             setTimeout function               ajaxTopicDropdown id                  2 location origin   api for gettings topics                     Pick a topic   true  5                                       1              ajaxtopicDropdown is dry fucntion to get topics for diffrent element and url

User · Answer

select   select2  val  null

User · Answer

One way to accomplish this is        select   select2   select2  val       select2 option eq 1    val       So basically you first initalize the plugin then specify the default value using the  val  parameter   The actual value is taken from the specified option  in this case  1   So the selected value from this example would be  bar     lt select class   select2  gt     lt option id  foo  gt Some Text lt  option gt     lt option id  bar  gt Other Text lt  option gt   lt  select gt    Hope this is useful to someone else

User · Answer

id   select2  val   null     this will not work  you can try   You should actually do this   intialise and then set the value  well this is also the way it worked for me       id   select2   select2  val   null       id   select2   select2  val    oneofthevaluehere

User · Answer

Don t know others issue  Only this code worked for me      select   val     select2

User · Answer

One more way - just add a selected    selected  attribute to the select markup and call select2 on it  It must take your selected value  No need for extra JavaScript  Like this    Markup    lt select class  select2  gt      lt option id  foo  gt Some Text lt  option gt      lt option id  bar  selected  selected  gt Other Text lt  option gt   lt  select gt    JavaScript     select   select2      oh yes just this    See fiddle   http   jsfiddle net 6hZFU   Edit   Thanks  Jay Haase      If this doesn t work  try setting the val property of select2 to null  to clear the value  like this      select   select2  val   null     a lil  bit more      After this  it is simple enough to set val to  Whatever You Want

User · Answer

If you are using an array data source you can do something like below -      select   select2       data  data names     data names forEach function name        if  name selected                select   select2  val   name id               This assumes that out of your data set the one item which you want to set as default has an additional attribute called selected and we use that to set the value

[javascript] JQuery select2 set default value from an option in list?

Examples related to javascript

Examples related to jquery

Examples related to html-select

Examples related to jquery-select2