Placeholder not working in select2

Question

I am working Select2 Select-box.

Problem

Placeholder is not showing in select2. It is always show the first option selected in the select2. It's automatically select first option i want to show the placeholder instead of it.

My Code:

Script:

<script type="text/javascript">
    $(document).ready(function () {
       var data = $('#test_skill').select2({
            placeholder: "Please select an skill",
            allowClear: true
       });
    });

// I have also tried this: This is also not working
    $('#test_skill').select2({
      placeholder: {
        id: '-1', // the value of the option
        text: 'Please select an skill'
      } 
    });
</script>

HTML:

<select class="skills_select2" required name="test_skill" id="test_skill">          
    <option value="1">TEST1</option>
    <option value="2">TEST2</option>
    <option value="3">TEST3</option>            
</select>

Otherwise check this link:https://stackoverflow.com/questions/21413241/how-to-use-placeholder-as-default-value-in-select2-framework — Anders Sørensen, Sep 11 '17 at 05:14

score 57 · Accepted Answer · answered Sep 11 '17 at 04:49

Just put <option></option> in select on first place:

$(document).ready(function() {
  $selectElement = $('#test_skill').select2({
    placeholder: "Please select an skill",
    allowClear: true
  });
});

.skills_select2 {
  width: 120px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" />
<select class="skills_select2" required name="test_skill" id="test_skill">   
    <option></option>
    <option value="1">TEST1</option>
    <option value="2">TEST2</option>
    <option value="3">TEST3</option>            
</select>

Mantaps! Gracias! Thank you! – Bariq Dharmawan Jan 14 '22 at 08:09 — Bariq Dharmawan, Jan 14 '22 at 08:09
The empty tag is required for this to work! – Blaze Clone Nov 09 '22 at 10:28 — Blaze Clone, Nov 09 '22 at 10:28

score 14 · Answer 2 · answered Sep 11 '17 at 05:45

For placeholders to work properly you have to add an empty option (i.e. ) as a first element to see a placeholder.

From Select2 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 () for the placeholder to work."

for example:

<select class="skills_select2" required name="test_skill" id="test_skill"> 
    <option></option>    
    <option value="1">TEST1</option>
    <option value="2">TEST2</option>
    <option value="3">TEST3</option>            
</select>

and javascript would be:

$("#test_skill").attr(
   "data-placeholder","Please select an skill"
);

This one has the correct reason why we need the empy option. — Gayan Kavirathne, Feb 10 '20 at 06:02

score 6 · Answer 3 · answered Sep 11 '17 at 04:47

6

How about setting it in html

<select>
  <option value="" disabled  selected>Select your option</option>
  <option value="your value ">your value</option>
</select>

answered Sep 11 '17 at 04:47

Anders Sørensen

426
1
4
14

1

However your answer is a workaround sir. But thanks for the answer. – always-a-learner Sep 11 '17 at 04:48
Loved this approach! Simple, elegant. Resistant to api changes in select2 jq. – Zoryana Tischenko Oct 06 '22 at 06:12

score 3 · Answer 4 · edited Sep 23 '19 at 21:49

3

Override templateSelection solve the problem:

templateSelection: function(item) { 
   return item.name  // "name" property of received data from ajax
               || item.text; // "text" value of default selected option or placeholder text
}

Original answer

edited Sep 23 '19 at 21:49

halfer

19,824
17
99
186

answered Jul 11 '19 at 12:12

Sayed Abolfazl Fatemi

3,678
3
36
48

1

The `|| item.text` fixed it for me, as I was using a the templateSelection option and I was only returning the `item.name` value – taekwondoalex Dec 01 '20 at 11:40

score 3 · Answer 5 · answered Aug 22 '22 at 14:05

There is a simple solution for this. Add the data-placeholder attribute and add a empty value option.

<select class="skills_select2" data-placeholder="Please select an option" required name="test_skill" id="test_skill"> 
    <option></option>    
    <option value="1">TEST1</option>
    <option value="2">TEST2</option>
    <option value="3">TEST3</option>            
</select>

score 2 · Answer 6 · edited Mar 21 '19 at 03:27

the best way for me is to set it like below: unshift the very first value to the data/result and set the placeholder in select2

$.ajax({
      url: 'api/v1/users',
      type: 'GET',
      success: function(response) {
        let data = $.map(response, function(responseData) {
          return {
            id: responseData.id,
            text: responseData.name
          }
        });
        const selectedElement = $('#user_id');

        selectedElement.html('');

        data.unshift({id: -1, text: '', selected: 'selected', search:'', hidden:true });

        selectedElement.select2({
          theme: 'bootstrap',
          data: data,
          placeholder: {
            id: "-1",
            text: '--- Please select a user ---',
            selected:'selected'
          }
        });

Basit · Answer 7 · 2022-06-21T09:31:03.963

1

Trigger the change event of select

$('#targetSelect').trigger('change');

or

$('#targetSelect').trigger('change.select2'); // Limiting the scope of the change event

Reference : https://select2.org/programmatic-control/events#limiting-the-scope-of-the-change-event

edited Jun 21 '22 at 09:31

answered Nov 08 '21 at 10:28

Basit

137
7

This worked in my case, where I couldn't add an empty – user5955461 Apr 29 '22 at 01:00

Placeholder not working in select2

Problem

My Code:

7 Answers7

Linked