web-dev-qa-db-fra.com

Espace réservé ne fonctionnant pas dans select2

Je travaille Select2 Select-box. 

Problème

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é.

 enter image description here

Mon 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>
jqueryjquery-select2
7
always-a-learner

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>

15
Govind Samrow

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

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>
2
Anders Sørensen

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'
          }
        });
0
Kiry Meas