Question

我有一个html.dropdownlist，它有4个选项。我希望它显示一个占位符文本defaut，它不包含在选项中。我通过在列表中添加默认选项实现了类似的功能，但是选择的默认选项会导致div展开并且它会破坏页面布局。

<div style="float:left; padding-left:13.4%;">
                        @Html.DropDownList("Adults", ViewData["Adults"] as List<SelectListItem>, new { @class = "dropdown2"})
</div>

这就是控制器代码;

   List<SelectListItem> adt = new List<SelectListItem>();

        //adt.Add(new SelectListItem
        //{
        //    Text = "1",
        //    Value = "1"
        //});
        adt.Add(new SelectListItem
        {
            Text = "1",
            Value = "1"
        });
        adt.Add(new SelectListItem
        {
            Text = "2",
            Value = "2"
        });
        adt.Add(new SelectListItem
        {
            Text = "3",
            Value = "3"
        });
        adt.Add(new SelectListItem
        {
            Text = "4",
            Value = "4"
        });

        ViewData["Adults"] = adt;
        return View();

我是mvc的新人，任何贡献将不胜感激。谢谢。

Answer 1

如果不直接实现，添加占位符文本即使不是不可能也很棘手。我推荐使用Chosen（JQuery Plugin）。它非常易于使用，并使下拉菜单美观。

https://harvesthq.github.io/chosen/

选择下拉列表的示例：

@Html.DropDownListFor(model => model.Example, Model.Example, new { @class = "chosen", data_placeholder="Choose items"})

Answer 2

您可以添加jquery代码以使用select属性向下拉列表添加选项，以便将该选项设置为占位符：

＆＃13;

$('#selectid').append($('<option/>', { 
        value: value,
        text : value 
    }));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id='selectid'>
    <option value="" disabled selected>Select your option</option>
    <option value="hurr">Durr</option>
</select>

＆＃13;

Answer 3

如果您使用的是ASP.NET MVC 5，则可以使用@Html.DropDownList的重载方法的光阑类型为string optionLabel。

这将在第一个索引的选择列表中添加一个新选项。将默认选择。并且如果始终选择默认选项，则不需要占位符。

@Html.DropDownList("Adults", ViewData["Adults"] as List<SelectListItem>, "Select Adult",new { @class = "dropdown2"})

Mvc下拉列表默认值和占位符

3 个答案: