jQuery Select2占位符不起作用

我正在关注此文档http://ivaynberg.github.io/select2/以创建与placeholder的选择框。我的问题是placeholder不起作用。你能帮助解决这个问题吗？jQuery 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现在和空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>

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

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

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

来源

2014-02-06 HP.

你不包括该插件的JavaScript代码;只是CSS。 – Pointy

我犯了一个错误，从本地代码复制 –

在我的情况下，它通过在'select'标签中添加'multiple =“”'来工作。然后在javascript中添加'maximumSelectionLength：1'选项。这里是更新[小提琴]（http://jsfiddle.net/latlov/VwGGU/167/）工作很好，但在我的项目中，它的工作。 – Pathros

你select元素有source的ID，但你的目标e2的id在你的jQuery选择，你需要一个空<option>标签

来源

2014-02-06 23:09:15 Pierre

我刚刚更新以插入空的“选项”，但它只是显示空白选项，而不是占位符文本。 –

这项工作对我来说 – cheloncio

'jsfiddle'对我也不适用 – delmalki

你有没有这样做：

当占位符用于非多值选择框，它需要你有一个空的标签作为你的第一个选项

来源

2014-02-06 23:08:11 Mediabeastnz

很好的建议，但直到他的测试页面实际上使用插件代码，这种改变不会有所帮助:) – Pointy

@Pointy是啊，只是注意到，它没有加载... – Mediabeastnz

@Myles我按照你的建议，但我还没有得到这个工作。你有链接到源文件。我无法在所选择的手册中找到它。 – usumoio

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

来源

2016-02-23 14:29:30

尝试this.In HTML你写下面的代码。

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

并在脚本中写下面的代码。

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

来源

2016-04-08 04:36:27 Raham

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

来源

2017-01-19 12:35:33

虽然这段代码可能会解决问题，但也应该解释如何以及为什么会有所帮助。 – BDL

-2

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

来源

2017-01-19 12:48:24

欢迎来到Stack Overflow，请花点时间关注[Stack Overflow tour]（http://stackoverflow.com/tour）并阅读[如何编写好的答案？]（http://stackoverflow.com /帮助/如何到结果） –

jQuery Select2占位符不起作用

回答

相关问题