Select2 -- 占位符不显示

Posted 2023-05-07

【中文标题】Select2 -- 占位符不显示

【英文标题】：Select2 -- placeholder not displaying

【发布时间】：2016-10-04 12:28:55

【问题描述】：

我在我的 asp.net mvc 5 应用程序中使用 Select2 插件。根据documentation

如果您需要更大的灵活性，占位符选项允许您传入数据对象而不仅仅是字符串。数据对象的 id 应该与占位符选项的值匹配。

我确实做到了，但占位符仍然没有出现。

代码：

model.Step6.Titles.Insert(0, new SelectListItem()  Text = "Select a Title", Value = "0", Selected = true );

@html.DropDownListFor(model => model.Step6.Title, Model.Step6.Titles, new  id="teamtitle", @style = "width: 100%;")

$("select").select2(
    allowClear: true,
    placeholder: 
        id: "0",
        placeholder: "Select an Title"
    
)

谁能告诉我我在这里做错了什么？

【参考方案1】：

我认为占位符是一个字符串。不是对象 https://select2.github.io/examples.html#placeholders

$("select").select2(
    allowClear: true,
    placeholder:"Select an Title"

)

【参考方案2】：

错误是placeholder: "Select an Title"。应该是-

$("select").select2(
    allowClear: true,
    placeholder: 
        id: "0",
        text: "Select an Title" //Should be text not placeholder
    
)

https://select2.org/placeholders

【参考方案3】：

我写在这里是因为我花了很多时间找出我的代码有什么问题。 我的占位符 object 也没有显示（而占位符 string 显示正确）。关键是空选项元素需要将值与占位符 id 匹配。 我的意思是，如果您放置第一个空选项，如下所示：

<option></option>

它与声明为的占位符不匹配

placeholder :  id:'0', text:'Please select...'

它不会显示任何内容。 相反，你应该写：

 <option value="0"></option>

【讨论】：

它帮助了我。非常感谢！

【参考方案4】：

注意，如果使用多选，则 select2 似乎需要占位符作为对象。有关使用 yadcf 的一般示例，请参阅 https://codepen.io/louking/pen/BGMvRP?#（对不起，额外的复杂性，但我相信 yadcf 将 select_type_options 直接传递给 select2）。 （以下摘录）

  
    column_number:2,
    select_type: 'select2',
    filter_type: 'multi_select',
    select_type_options:
      
        placeholder: 
          id: -1,
          text: 'pick col2'
        ,
        width: '200px',
        allowClear: true,
      
  ,

【讨论】：

用我的多选救了我！