javascript – jQuery Select2占位符不起作用

我正在跟随这个文档http://ivaynberg.github.io/select2/创建带有占位符的选择框。我的问题是占位符不起作用。你能帮忙解决这个代码吗?

代码:也在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和空选项。它仍然不显示占位符

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/

您的select元素具有源的ID,但是您的jQuery选择器中的目标位置为e2,您需要一个空的< option>标签
翻译自:https://stackoverflow.com/questions/21616023/jquery-select2-placeholder-doesnt-work

转载注明原文:javascript – jQuery Select2占位符不起作用