jQuery Select2占位符不起作用

Question

我正在按照這個文檔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
});

上面的示例顯示“Alaska”而不是“Select a State”作為占位符。

更新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：

奇怪的是，當我從github復制.css和.js鏈接時，jsfiddle給出了錯誤。 這個版本有效

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/

Answer 1

你做到了這個：

當占位符用於非多值選擇框時，它要求您包含空標記作為第一個選項

Answer 2

你的select元素的id為source但是你的jQuery選擇器中的id是e2 ，你需要一個空的<option>標簽

Answer 3

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

Answer 4

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

Answer 5

試試這個。在html中你寫下面的代碼。

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

並在您的腳本中編寫以下代碼。

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

Answer 6

您應該在select中添加一個空選項標記。

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

選中此鏈接占位符僅在有空選項元素時有效

Answer 7

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