14

我正在使用 asp.net mvc 3。

我有这个国家的下拉列表，我想为它添加一个占位符。这是我的代码：

@Html.DropDownList("country",
     new SelectList(ViewBag.countries as System.Collections.IEnumerable,
     "name", "name"), new { @class="chzn-select", @placeholder="-select-",
     @style="width:160px;" } )

但是占位符不起作用，而样式起作用。

如何为此设置占位符？

PS。我只是想用@Html.DropDownList，不是@Html.DropDownListFor

4

10 回答 10

12

你可以试试这个：

@Html.DropDownList("country", new SelectList(ViewBag.countries), "-select- ", new { @class="chzn-select", @style="width:160px;" })
于 2015-05-20T11:31:40.263 回答
7

一个涉及 jQuery 的快速且（不是那么）肮脏的解决方案。

不要在列表的开头添加一个虚拟项目，而是在前面添加一个禁用的新选项。主要优点是您不必弄乱列表中的虚拟项目，最重要的是，您将无法在页面中选择该虚拟项目：

@Html.DropDownList("yourName", yourSelectList, new { @class = "form-control select-add-placeholder" })

然后某处之后：

$(".select-add-placeholder").prepend("<option value='' disabled selected>Select an option...</option>");

看起来像：

在此处输入图像描述

于 2018-11-14T15:54:18.603 回答
6

在您的集合 ViewBag.Countries 中，只需在集合的 from 处插入一个名为“-select-”的虚拟记录。您应该能够使用这样的替代构造函数强制选定项目：

@Html.DropDownList("country",
     new SelectList(ViewBag.countries as System.Collections.IEnumerable,
     "name", "name", "-select-"), new { @class="chzn-select", @style="width:160px;" } )
于 2013-04-18T02:43:48.590 回答
4 
@Html.DropDownListFor(m => m.SelectedProductIDs, 
Model.AvaliableProducts.ToSelectList("ID","Name"),
                       new { @class = "chzn-select", 
                            data_placeholder="Please select a product" })...

请查看更多详细信息：http ://code.stylenet.ca/mvc3-data-placeholder-html5-attribute/

于 2014-07-30T15:30:43.130 回答
1

我可以看到没有一个简单的答案。我开发了一个简单的解决方案，但它提供了一些工作。这适用于DropDownList和DropDownListFor

首先在任何你想要的地方创建一个扩展类。（必须是Static with static methods）然后添加如下扩展方法

public static MvcHtmlString DropDownList(this HtmlHelper htmlHelper,string name, IEnumerable<SelectListItem> selectList, string optionLabel, bool disableLabel)
{
    MvcHtmlString mvc = htmlHelper.DropDownList(name, selectList, optionLabel);
    if (disableLabel)
    {
        string disabledOption = mvc.ToHtmlString();
        int index = disabledOption.IndexOf(optionLabel);
        disabledOption = disabledOption.Insert(index - 1, " disabled");

        return new MvcHtmlString(disabledOption);
    }
    else
    {
        return mvc;
    }
}

现在注意这个扩展只添加了一个新属性，disableLabel 这将检查你是否要禁用标签。

现在你让我们去查看端首先声明你想使用你创建的扩展类：@using WF.Infrastructure.Extension;

现在你像这样使用：@Html.DropDownList("Unidade", lstUnidade, "Text of Option Disabled",true)

注意：如果您希望它与 DropDownListFor 一起使用，只需使用此签名为您的扩展类添加另一个扩展方法：

public static MvcHtmlString DropDownListFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, IEnumerable<SelectListItem> selectList, string optionLabel,bool disableLabel)

PS：如果您在像我这样的单独项目中声明扩展方法，则需要添加程序集（System.Web.Mvc，System.Web），并且在扩展类中您需要声明：

using System.Web.Mvc;
using System.Web.Mvc.Html;
于 2014-11-03T20:14:28.073 回答
0

也许如果你愿意，试试这个：

@Html.DropDownList("country",null,"-SELECT-",new { @class="chzn-select",@style="width:160px;" })
于 2019-08-08T06:56:38.310 回答
0

试试这个：

@Html.DropDownList("MetadataId", (MultiSelectList)ViewData["category"], "All Categories",
    new { @class = "chk_dropdown d-none", @id = "categories", multiple = "multiple" })
于 2019-11-04T09:32:03.720 回答
-1

试试这个

@Html.DropDownListFor(m => m.SelectedProductIDs, Model.AvaliableProducts.ToSelectList("ID","Name"), new { @class = "chzn-select", data-placeholder="Please select a product" })

或者

@Html.DropDownListFor(model => model.SelectedItemID, new SelectList(Model.employeeList, "Value", "Text"), new Dictionary<string, object> { { "data-placeholder", "Choose a sandbox..." }, { "class", "chzn-select" }, { "style", "width:200px;" } })
于 2013-04-18T04:16:09.157 回答
-1

最好的办法

@Html.DropDownListFor(m => m.SelectedProductIDs,
                      Model.AvaliableProducts.ToSelectList("ID","Name"),
                      "Please select a product",
                      new { @class = "chzn-select"})
于 2017-12-07T07:02:25.580 回答
-1 
@Html.DropDownListFor(m => m.SelectedProductIDs,
                      Model.AvaliableProducts.ToSelectList("ID","Name"),
                      "Please select a product",
                      new {enter code here @class = "chzn-select"})
于 2018-05-29T12:18:52.360 回答