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

= f.input :field, collection: Field.all, as: :select, input_html: { data: { placeholder: 'Choose your country' } }, label_method: :name, value_method: :alpha2, required: true — mmike, Jul 14 '16 at 11:47

score 138 · Accepted Answer · edited Dec 24 '22 at 00:39

138

You have to add an empty option (i.e. <option></option>) 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 (<option></option>) for the placeholder to work."

Example:

<select id="countries">
    <option></option>
    <option value="1">Germany</option>
    <option value="2">France</option>
    <option value="3">Spain</option>
</select>

and the Javascript would be:

$('#countries').select2({
    placeholder: "Please select a country"
});

edited Dec 24 '22 at 00:39

starball

20,030
7
43
238

answered Aug 20 '14 at 16:41

meherzi.sahbi

1,691
1
14
14

1

i dont understand. can you make me an example? – Konstantin XFlash Stratigenas Nov 08 '16 at 19:55
7

How if i populate data from ajax? – Zein Miftah Nov 28 '17 at 05:05

score 56 · Answer 2 · edited May 10 '18 at 10:42

56

Put this in your script file:

$('select').select2({
    minimumResultsForSearch: -1,
    placeholder: function(){
        $(this).data('placeholder');
    }
});

And then in HTML, add the following code:

<select data-placeholder="Your Placeholder" multiple>
    <option></option> <------ this is where your placeholder data will appear
    <option>Value 1</option>
    <option>Value 2</option>
    <option>Value 3</option>
    <option>Value 4</option>
    <option>Value 5</option>
</select>

edited May 10 '18 at 10:42

Asad Ali Khan

307
4
16

answered Jun 09 '15 at 16:57

Oleg Sevruk

999
8
11

IMO this is the best approach for both multiple and single selects – Rob May 20 '16 at 09:47
2

this works, but you need to add an empty option as first element in the select. Plus you don't need "minimumResultsForSearch: -1 " . i.e. in case you have only 1 result , you won't be able to select anything. – myh34d May 22 '16 at 08:47
1

Per the [docs](https://select2.org/configuration/options-api), "placeholder" does not accept a function as a value. This only works because [select2 uses data-* attributes](https://select2.org/configuration/data-attributes) to populate placeholder – But those new buttons though.. Oct 29 '20 at 21:58

score 29 · Answer 3 · edited Oct 08 '18 at 19:05

29

$('#ddlSelect').prepend('<option selected=""></option>').select2({placeholder: "Select Month"});

edited Oct 08 '18 at 19:05

Zapnologica

22,170
44
158
253

answered Nov 01 '16 at 17:11

Colin

1,758
1
19
24

2

+1 In the current version the empty option has to be seleted though: $('#ddlSelect').prepend('').select2({placeholder: "Select Month"}); – 3und80 Mar 13 '17 at 13:19
This answer is incorrect. as `prepend` will be called after efter every allotment of the value. So if you have 1000 values, then you will get 1000 prepend. – Ankur Soni May 31 '17 at 09:04
@AnkurSoni what are you trying to say? This solution is working for me fine – Hamza Khanzada Dec 04 '19 at 19:36
This is cool solution, thx alot, i was struggling with "FORM SUBMITTING VIA AJAX WITH SELECT2 DROPDOWN" – Vipertecpro Jul 23 '21 at 06:44

score 15 · Answer 4 · edited Jan 17 '18 at 15:23

15

$("#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

edited Jan 17 '18 at 15:23

Darin Kolev

3,401
13
31
46

answered Jan 28 '14 at 18:41

Cristina Cristea

566
1
3
11

2

Please note that the option list of the select field has to contain an empty option `` that placeholders work for single select fields. For me kind of a bug. – TiMESPLiNTER Mar 30 '14 at 15:44
This is a working example – Spl2nky Jul 30 '15 at 10:07

score 8 · Answer 5 · answered Jan 31 '18 at 21:00

8

This worked for me:

$('#SelectListId').prepend('<option selected></option>').select2({
    placeholder: "Select Month",
    allowClear: true
});

Hope this help :)

answered Jan 31 '18 at 21:00

Ignacio Franco

126
1
8

Esto funciono para mi – daniel Jul 27 '22 at 23:38

score 3 · Answer 6 · answered May 12 '17 at 14:42

Use a empty placeholder on your html like:

<select class="select2" placeholder = "">
    <option value="1">red</option>
    <option value="2">blue</option>
</select>

and in your script use:

$(".select2").select2({
        placeholder: "Select a color",
        allowClear: true
    });

Nadav · Answer 7 · 2021-05-29T16:51:55.977

In the current version of select2 you just need to add the attribute data-placeholder="A NICE PLACEHOLDER". select2 will automatically assign the placeholder. Please note: adding an empty <option></option> inside the select is still mandatory.

<select id="countries" data-placeholder="***A NICE PLACEHOLDER***">
  <option></option>
  <option value="1">Germany</option>
  <option value="2">France</option>
  <option value="3">Spain</option>
</select>

score 2 · Answer 8 · answered Dec 13 '18 at 07:30

you can init placeholder in you select html code in two level such as:

<select class="form-control select2" style="width: 100%;" data-placeholder="Select a State">
   <option></option>
   <option>تهران</option>
   <option>مشهد</option>
   <option>اصفهان</option>
   <option>شیراز</option>
   <option>اهواز</option>
   <option>تبریز</option>
   <option>کرج</option>   
</select>

1.set data-placeholder attribute in your select tag 2.set empty tag in first of your select tag

score 1 · Answer 9 · answered Feb 24 '17 at 12:33

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

score 0 · Answer 10 · answered Apr 08 '16 at 09:21

Try this.In html you write the following code.

<select class="select2" multiple="multiple" placeholder="Select State">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
</select>

And in your script write the below code.Keep in mind that have the link of select2js.

<script>
         $( ".select2" ).select2( { } );
 </script>

score 0 · Answer 11 · answered Nov 05 '16 at 19:58

The simplest way to add empty "option" before all.

<option></option>

Example:

<select class="select2" lang="ru" tabindex="-1">
    <option></option>
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
</select>

Also js code, if you need:

$(document).ready(function() {
    $(".select2").select2({
            placeholder: "Select a state",
            allowClear: true
        });
    });
}

score 0 · Answer 12 · edited Feb 04 '21 at 16:47

0

I tried all this and in the end, simply using a title="text here" worked for my system. Note there is no blank option

<select name="Restrictions" class="selectpicker show-tick form-control" 
        data-live-search="true" multiple="multiple" title="Choose Multiple">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

edited Feb 04 '21 at 16:47

Paul Roub

36,322
27
84
93

answered Feb 04 '21 at 16:42

Scott Thompson

33
1
4

score -1 · Answer 13 · edited Jul 08 '20 at 16:24

-1

Just add this class in your .css file.

.select2-search__field{width:100% !important;}

edited Jul 08 '20 at 16:24

β.εηοιτ.βε

33,893
13
69
83

answered Jul 08 '20 at 16:00

aqeel haider

1
3

score -2 · Answer 14 · edited Feb 23 '16 at 14:38

-2

$selectElement.select2({
    minimumResultsForSearch: -1,
    placeholder: 'SelectRelatives'}).on('select2-opening', function() {                                                                       $(this).closest('li').find('input').attr('placeholder','Select Relative');                            
});

edited Feb 23 '16 at 14:38

Bhargav Rao

50,140
28
121
140

answered Feb 23 '16 at 14:32

Amar Jagtap

99
1
2

How to use placeholder as default value in select2 framework

14 Answers14

Linked

Related