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>