JQuery Select2 placeholder не работает

Я следую этому документу http://ivaynberg.github.io/select2/, чтобы создать поле выбора с placeholder. Моя проблема в placeholder не работает. Вы можете помочь исправить этот код?

Код: Также на 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
});

В приведенном выше примере показано "Аляска" вместо "Выберите состояние" в качестве заполнителя.

ОБНОВЛЕНИЕ 1:

Добавлено select2.js сейчас и пустое option. Он все еще не показывает 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/

ОБНОВЛЕНИЕ 2:

Странно, что jsfiddle дал ошибку, когда я скопировал ссылку .css и .js из github. Эта версия работает

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/

Ответы

Ответ 1

В элементе select есть идентификатор source, но вы ориентируетесь на id of e2 в вашем селекторе jQuery, и вам нужен пустой тег <option>

Ответ 2

Вы сделали это:

Когда placeholder используется для блока выбора не для нескольких значений, для этого требуется, чтобы вы включили пустой тег в качестве первого параметра

Ответ 3

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

Ответ 4

Попробуйте это. В html вы пишете следующий код.

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

И в вашем script напишите приведенный ниже код.

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

Ответ 5

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

Ответ 6

 <script>
         $( "#id").select2({ placeholder: "Select Franchise" });
 </script>