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>
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>
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"
);
How about setting it in html
<select>
<option value="" disabled selected>Select your option</option>
<option value="your value ">your value</option>
</select>
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'
}
});
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