【问题标题】:Select2 -- placeholder not displayingSelect2 -- 占位符不显示
【发布时间】: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"
    }
})

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

【问题讨论】:

    标签: javascript jquery asp.net asp.net-mvc select2


    【解决方案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,
              }
          },
        

        【讨论】:

        • 用我的多选救了我!
        猜你喜欢
        • 1970-01-01
        • 2017-01-15
        • 1970-01-01
        • 2013-10-27
        • 2013-07-31
        • 2018-11-14
        • 1970-01-01
        相关资源
        最近更新 更多