How to use placeholder as default value in select2 framework

Question

To get the chosen value of a select2 I m using   var x       select   select2  data    var select choice   x text   The problem is this throws an error if not value has been selected and I was wondering if there was any way to make it return the placeholder if no option is selected

User · Answer

selectElement select2       minimumResultsForSearch  -1      placeholder   SelectRelatives    on  select2-opening   function                                                                             this  closest  li   find  input   attr  placeholder   Select Relative

User · Answer

The simplest way to add empty  option  before all    lt option gt  lt  option gt    Example    lt select class  select2  lang  ru  tabindex  -1  gt       lt option gt  lt  option gt       lt option value  AK  gt Alaska lt  option gt       lt option value  HI  gt Hawaii lt  option gt   lt  select gt    Also js code  if you need     document  ready function             select2   select2               placeholder   Select a state               allowClear  true

User · Answer

You have to add an empty option  i e   lt option gt  lt  option gt   as a first element to see a placeholder   From Select2 official documentation       Note that because browsers assume the first option element is selected in non-multi-value select boxes an empty first option element must be provided   lt option gt  lt  option gt   for the placeholder to work     Hope this helps   Example    lt select id  countries  gt       lt option gt  lt  option gt       lt option value  1  gt Germany lt  option gt       lt option value  2  gt France lt  option gt       lt option value  3  gt Spain lt  option gt   lt  select gt    and the Javascript would be       countries   select2       placeholder   Please select a country

User · Answer

Try this In html you write the following code    lt select class  select2  multiple  multiple  placeholder  Select State  gt       lt option value  AK  gt Alaska lt  option gt       lt option value  HI  gt Hawaii lt  option gt   lt  select gt    And in your script write the below code Keep in mind that have the link of select2js    lt script gt                select2    select2           lt  script gt

User · Answer

you can init placeholder in you select html code in two level such as    lt select class  form-control select2  style  width  100    data-placeholder  Select a State  gt      lt option gt  lt  option gt      lt option gt       lt  option gt      lt option gt      lt  option gt      lt option gt        lt  option gt      lt option gt       lt  option gt      lt option gt       lt  option gt      lt option gt       lt  option gt      lt option gt     lt  option gt      lt  select gt    1 set data-placeholder attribute in your select tag 2 set empty  tag in first of your select tag

User · Answer

Use a empty placeholder on your html like    lt select class  select2  placeholder      gt       lt option value  1  gt red lt  option gt       lt option value  2  gt blue lt  option gt   lt  select gt    and in your script use       select2   select2           placeholder   Select a color           allowClear  true

User · Answer

ddlSelect   prepend   lt option selected    gt  lt  option gt    select2  placeholder   Select Month

User · Answer

I tried all this and in the end  simply using a title  quot text here quot  worked for my system  Note there is no blank option  lt select name  quot Restrictions quot  class  quot selectpicker show-tick form-control quot           data-live-search  quot true quot  multiple  quot multiple quot  title  quot Choose Multiple quot  gt       lt option value  quot 1 quot  gt One lt  option gt       lt option value  quot 2 quot  gt Two lt  option gt       lt option value  quot 3 quot  gt Three lt  option gt   lt  select gt

User · Answer

In the current version of select2 you just need to add the attribute data-placeholder  quot A NICE PLACEHOLDER quot   select2 will automatically assign the placeholder  Please note  adding an empty  lt option gt  lt  option gt  inside the select is still mandatory

User · Answer

e2   select2      placeholder   Select a State      allowClear  true         e2 2   select2      placeholder   Select a State        The placeholder can be declared via a data-placeholder attribute attached to the select  or via the placeholder configuration element as seen in the example code   When placeholder is used for a non-multi-value select box  it requires that you include an empty  tag as your first option   Optionally  a clear button  visible once a selection is made  is available to reset the select box back to the placeholder value   https   select2 org placeholders

User · Answer

Just add this class in your  css file   select2-search  field width 100   important

User · Answer

This worked for me        SelectListId   prepend   lt option selected gt  lt  option gt    select2       placeholder   Select Month       allowClear  true       Hope this help

User · Answer

Put this in your script file      select   select2       minimumResultsForSearch  -1      placeholder  function              this  data  placeholder                And then in HTML  add the following code    lt select data-placeholder  Your Placeholder  multiple gt       lt option gt  lt  option gt   lt ------ this is where your placeholder data will appear      lt option gt Value 1 lt  option gt       lt option gt Value 2 lt  option gt       lt option gt Value 3 lt  option gt       lt option gt Value 4 lt  option gt       lt option gt Value 5 lt  option gt   lt  select gt

User · Answer

I did the following   var defaultOption   new Option    defaultOption selected   true          js-select2   append defaultOption     For other options I use then   var realOption   new Option  Option Value    id    realOption selected   false          js-select2   append realOption

[jquery] How to use placeholder as default value in select2 framework

Examples related to jquery

Examples related to jquery-selectors

Examples related to jquery-select2