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,但您是指定id的e2在你的jQuery选择,你需要一个空的<option>标签