select2占位符显示空选项

时间:2013-10-18 14:41:46

标签: javascript css twitter-bootstrap jquery-select2

在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>

但是当我这样做时,我将此选项设为空可选 enter image description here

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

谢谢!

8 个答案:

答案 0 :(得分:19)

第二行有语法错误。

<option></option>

答案 1 :(得分:7)

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

我有一个带有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');

答案 2 :(得分:2)

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

答案 3 :(得分:1)

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

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

s1.val([' ']).trigger("change");做了伎俩

答案 4 :(得分:0)

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

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

答案 5 :(得分:0)

试试$('select').select2({placeholder: 'Please select...'});。结合空<option></option>应该完成工作;)。

答案 6 :(得分:0)

我刚刚遇到了同样的问题,简单的<option></option>对我没有用。

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

我通过添加一个 non-breaking-space &nbsp;)字符(简单的空格也不起作用)解决了这个问题:

<option>&nbsp;</option>

答案 7 :(得分:0)

有点离题,但您可以为此搜索解决方案:

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