web-dev-qa-db-fra.com

l'espace réservé jQuery Select2 ne fonctionne pas

Je suis cette doc http://ivaynberg.github.io/select2/ pour créer une zone de sélection avec placeholder. Mon problème est que la placeholder ne fonctionne pas. Pouvez-vous aider à corriger ce code?

Code: Également sur http://jsfiddle.net/VwGGU/3/

HTML:

<select style="width:300px" id="source">
    <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
    </optgroup>
    <optgroup label="Pacific Time Zone">
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
        <option value="OR">Oregon</option>
        <option value="WA">Washington</option>
    </optgroup>
</select>

Javascript:

$("#e2").select2({
    placeholder: "Select a State",
    allowClear: true
});

L'exemple ci-dessus montre "Alaska" au lieu de "Sélectionnez un État" comme espace réservé.

UPDATE 1:

Ajout de select2.js maintenant et vide option. Il ne montre toujours pas placeholder

HTML

<select style="width:300px" id="source" placeholder="testt test">
    <option></option>
    <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
    </optgroup>
    <optgroup label="Pacific Time Zone">
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
        <option value="OR">Oregon</option>
        <option value="WA">Washington</option>
    </optgroup>

JS

$(document).ready(function () {
    $("#source").select2({
        placeholder: "Select a State",
        allowClear: true
    });
});

http://jsfiddle.net/VwGGU/6/

UPDATE 2:

Étrange que jsfiddle ait donné une erreur lorsque j'ai copié le lien .css et le lien .js de github. Cette version fonctionne

HTML

<select style="width:300px" id="source" >
    <option></option>
    <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
    </optgroup>
    <optgroup label="Pacific Time Zone">
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
        <option value="OR">Oregon</option>
        <option value="WA">Washington</option>
    </optgroup>

JS

$(document).ready(function () {
    $("#source").select2({
        placeholder: "Select a State",
        allowClear: true
    });
});

http://jsfiddle.net/VwGGU/9/

javascriptjqueryhtmltwitter-bootstrapjquery-select2
19
HP.

Votre élément select a un identifiant de source mais vous ciblez une id de e2 dans votre sélecteur jQuery et vous avez besoin d'une balise <option> vide

30
Pierre

Avez-vous fait ceci:

Lorsque l'espace réservé est utilisé pour une zone de sélection à valeurs multiples non multiples, il est nécessaire d'inclure une balise vide en tant que première option.

41
Mediabeastnz
$selectElement.select2({
    minimumResultsForSearch: -1,
    placeholder: 'Select Relatives'
}).on('select2-opening', function() {
    $(this).closest('li').find('input').attr('placeholder','Select Relative');
});
1
Amar Jagtap

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.

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

Vous devez ajouter une balise option vide à la sélection.

<select data-placeholder="Chose number" data-allow-clear="true" data-width="50%">
    <option></option>
    <option value="1">Number one</option>
    <option value="2">Number two</option>
    <option value="3">Number three</option>
</select>

Cochez ce lien Placeholder ne fonctionne que s’il existe un élément option vide

0
anayarojo
<select id="select2Box" class="form-control brand-select">
    <option value="">Select Franchise</option>
</select>
0
Malladi Bhaskar