Placeholder not working in select2

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

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>