web-dev-qa-db-fra.com

Comment utiliser un espace réservé comme valeur par défaut dans le cadre de select2

Pour obtenir la valeur choisie d'un select2 j'utilise:

var x = $("#select").select2('data');
var select_choice = x.text

Le problème est que cela génère une erreur si aucune valeur n'a été sélectionnée et je me demandais s'il y avait un moyen de le faire retourner l'espace réservé si aucune option n'est sélectionnée.

jqueryjquery-selectorsjquery-select2
33
Gottfried

Vous devez ajouter une option vide (à savoir <option></option>) en tant que premier élément pour voir un espace réservé.

Dans la documentation officielle de 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 non à valeurs multiples, un premier élément d'option vide doit être fourni (<option></option>) pour que l'espace réservé fonctionne."  

J'espère que cela t'aides.

Exemple:

<select id="countries">
    <option></option>
    <option value="1">Germany</option>
    <option value="2">France</option>
    <option value="3">Spain</option>
</select>

et le Javascript serait:

$('#countries').select2({
    placeholder: "Please select a country"
});
82
meherzi.sahbi

Mettez ceci dans votre fichier de script:

$('select').select2({
    minimumResultsForSearch: -1,
    placeholder: function(){
        $(this).data('placeholder');
    }
});

Et puis en HTML, ajoutez le code suivant:

<select data-placeholder="Your Placeholder" multiple>
    <option></option> <------ this is where your placeholder data will appear
    <option>Value 1</option>
    <option>Value 2</option>
    <option>Value 3</option>
    <option>Value 4</option>
    <option>Value 5</option>
</select>
33
Oleg Sewruk
$("#e2").select2({
   placeholder: "Select a State",
   allowClear: true
});
$("#e2_2").select2({
   placeholder: "Select a State"
});

L'espace réservé peut être déclaré via un attribut data-placeholder attaché à l'élément select ou via l'élément de configuration d'espace réservé, comme indiqué dans l'exemple de code.

Lorsque le paramètre fictif est utilisé pour une zone de sélection à valeurs multiples multiples, vous devez inclure une balise vide en tant que première option.

Un bouton d'effacement (visible une fois la sélection effectuée) est éventuellement disponible pour réinitialiser la zone de sélection sur la valeur de l'espace réservé.

https://select2.org/placeholders

14
Cristina Cristea
$('#ddlSelect').prepend('<option selected=""></option>').select2({placeholder: "Select Month"});
10
Versatile

Cela a fonctionné pour moi: 

$('#SelectListId').prepend('<option selected></option>').select2({
    placeholder: "Select Month",
    allowClear: true
});

J'espère que cette aide :)

3
Ignacio Franco

Utilisez un espace réservé vide sur votre code HTML comme:

<select class="select2" placeholder = "">
    <option value="1">red</option>
    <option value="2">blue</option>
</select>

et dans votre script, utilisez:

$(".select2").select2({
        placeholder: "Select a color",
        allowClear: true
    });
2
LipeTuga

J'ai fait ce qui suit:

var defaultOption = new Option();
defaultOption.selected = true;    
$(".js-select2").append(defaultOption);

Pour les autres options que j'utilise alors:

var realOption = new Option("Option Value", "id");
realOption.selected = false;    
$(".js-select2").append(realOption);
1
admirm

vous pouvez initier un espace réservé en sélectionnant du code html à deux niveaux tels que:

<select class="form-control select2" style="width: 100%;" data-placeholder="Select a State">
   <option></option>
   <option>تهران</option>
   <option>مشهد</option>
   <option>اصفهان</option>
   <option>شیراز</option>
   <option>اهواز</option>
   <option>تبریز</option>
   <option>کرج</option>   
</select>

1.set attribut data-placeholder dans votre balise select 2.set balise vide dans le premier de votre balise select

0
Omid Ahmadyani

Essayez ceci. En HTML, vous écrivez le code suivant.

<select class="select2" multiple="multiple" placeholder="Select State">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
</select>

Et dans votre script, écrivez le code ci-dessous. Gardez à l'esprit les liens qui ont le lien select2js.

<script>
         $( ".select2" ).select2( { } );
 </script>
0
Raham

Le moyen le plus simple d'ajouter une "option" vide avant tout.

<option></option>

Exemple:

<select class="select2" lang="ru" tabindex="-1">
    <option></option>
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
</select>

Aussi code js, si vous avez besoin de:

$(document).ready(function() {
    $(".select2").select2({
            placeholder: "Select a state",
            allowClear: true
        });
    });
}
0
denismart