jQuery Select2 占位符不起作用

Posted 2023-05-07

【中文标题】jQuery Select2 占位符不起作用

【英文标题】：jQuery Select2 placeholder doesn't work

【发布时间】：2014-03-04 04:08:45

【问题描述】：

我正在关注此文档 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/

【问题讨论】：

您没有包含插件的 javascript 代码；只是 CSS。

我从本地代码复制时出错了

在我的例子中，它通过将multiple="" 添加到select 标签来工作。然后在 javascript 中我添加了 maximumSelectionLength: 1, 选项。这是更新后的fiddle 工作得很好，但在我的项目中它确实有效。

【参考方案1】：

你这样做了吗：

当占位符用于非多值选择框时，它要求您包含一个空标签作为您的第一个选项

【讨论】：

好建议，但在他的测试页面实际使用插件代码之前，此更改将无济于事:)

@Myles 我已经听从了你的建议，但我还没有让这个工作。你有源文档的链接吗？我在所选手册中找不到这个。

@usumoio 你能在线发布你的代码吗？乐于助人，但在没有看到代码的情况下很难调试 :)

@Myles 我搞砸了，我正在使用不同的工具，也忘记了我在做什么。我在办公室太晚了。请无视。

【参考方案2】：

您的 select 元素的 id 为 source，但您在 jQuery 选择器中的目标是 id 或 e2，您需要一个空的 <option> 标签

【讨论】：

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

【参考方案3】：

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

【参考方案4】：

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

【讨论】：

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

【参考方案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>

【参考方案6】：

您应该在选择中添加一个空选项标签。

<select data-placeholder="Chose number" data-allow-clear="true" data->
    <option></option>
    <option value="1">Number one</option>
    <option value="2">Number two</option>
    <option value="3">Number three</option>
</select>

查看此链接Placeholder only works when there's an empty option element

【参考方案7】：

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

【讨论】：

欢迎来到 Stack Overflow，请花点时间关注 Stack Overflow tour 并阅读有关 How do I write a good answer? 的信息