select2 占位符显示空选项

Posted 2023-05-07

【中文标题】select2 占位符显示空选项

【英文标题】：select2 placeholder showing empty option

【发布时间】：2013-10-27 11:04:58

【问题描述】：

在 select2 中也添加一个占位符，我必须像这样在代码中添加一个空选项标签

<select id="e2" name="rol_id" >
                       <option><option>
                       foreach from=$data.roles item=rol
                       <option value=$rol.rol_id>$rol.rol_nombre</option>
                       /foreach
 </select>

但是当我这样做时，我会将此选项设为空，这是可选的

我怎么能不显示该选项但仍然是占位符？

谢谢！

【问题讨论】：

style="display:none;" ?

仍然显示空选项@3rror404

也许这是一个选项？ jsfiddle.net/nJ8Vu

我不知道是不是因为选择在模态框内，但是禁用的选项不起作用=（@3rror404

【参考方案1】：

第二行有语法错误。

<option></option>

【讨论】：

在 select2 文档中，它说：当占位符用于非多值选择框时，它要求您包含一个空的 标记作为您的第一个选项。 @Max

@MarianaHernandez 没问题 =)

空选项很好，但需要告诉 select2 占位符文本 - 然后它将隐藏空选项...

【参考方案2】：

这是一个迟到的答案，但它可以帮助某人。

我有一个带有 select2 输入的模态。

我们需要添加<option></option> 才能显示占位符。

HTML

<select  id="Name">
  <option></option>
  <option value="John">John</option>
  <option value="Brian">Brian</option> 
  <option value="Carl">Carl</option>
</select>

如果我想让占位符出现。

jQuery

$('#Name').select2(placeholder: 'Select a Name');

$('#Name').select2('val', '');

如果我想查看 select2 输入的值：

$('#Name').select2('val', 'John');

【参考方案3】：

空选项实际上是占位符，我使用下面的代码解决了它

var s1 = $('#select2id').select2(
                    multiple: true,
                    placeholder: "Select values"
                );
                s1.val([' ']).trigger("change"); 

s1.val([' ']).trigger("change"); 成功了

【讨论】：

这是一个类似的解决方案，它使用纯 html 来防止它被点击，以及其他几种方法：***.com/a/23638053/3196753

【参考方案4】：

保留空选项并通过标签上的 data-placeholder 属性或在初始化 select2 时通过占位符选项指定占位符文本。

【参考方案5】：

您可以在加载角色选项后添加一行以删除第一个“空”选项。 您可以使用 jquery 进行如下操作。

$("#selectBox option[value='']").remove();

【讨论】：

谢谢，我试过了，但它删除了占位符 =( @sr.

【参考方案6】：

试试$('select').select2(placeholder: 'Please select...');。结合一个空的<option></option> 应该可以完成这项工作;)。

【参考方案7】：

我刚刚遇到了同样的问题，简单的<option></option> 对我不起作用。

似乎插入了空选项，但它没有分配任何高度，因此无法到达它。

我通过添加一个 non-breaking-space ( ) 字符解决了（简单的空格也不起作用）：

<option>&nbsp;</option>

【参考方案8】：

有点离题，但您可以搜索解决方案：

如果您在每个 select2 小部件选项之间有空选项 - 如果您在模板中使用 jinja % for % 循环，请检查您的 jinja 标签并删除 <option></option> 标签。