Je travaille Select2
Select-box.
L'espace réservé n'apparaît pas dans select2
. Il est toujours affiché la première option sélectionnée dans le select2
. Il sélectionne automatiquement la première option et souhaite afficher l'espace réservé.
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>
Il suffit de mettre <option></option>
dans select à la première 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>
Pour que les espaces réservés fonctionnent correctement, vous devez ajouter une option vide (c'est-à-dire) en tant que premier élément permettant d'afficher un espace réservé.
De la documentation Select2:
"Notez que, dans la mesure où les navigateurs supposent que le premier élément d'option est sélectionné dans les zones de sélection sans valeurs multiples, un premier élément d'option vide doit être fourni () pour que le paramètre fictif fonctionne."
par exemple:
<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>
et javascript serait:
$("#test_skill").attr(
"data-placeholder","Please select an skill"
);
Que diriez-vous de le définir en HTML
<select>
<option value="" disabled selected>Select your option</option>
<option value="your value ">your value</option>
</select>
le meilleur moyen pour moi est de le définir comme suit:
$.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'
}
});