如何将自定义属性添加到 Html.DropDownListFor 选项值而不是选择值答案

【问题标题】：How to add custom attribute to Html.DropDownListFor option value instead of select value如何将自定义属性添加到 Html.DropDownListFor 选项值而不是选择值
【发布时间】：2017-01-10 02:07:48
【问题描述】：

@Html.DropDownListFor(m => m.ProductId, new SelectList(Model.Products, "Id", "ProductName", Model.ProductId), htmlAttributes: new { @class = "form-control", @id = "productsnew" })

上面的代码出下面的代码行

<select name="SelectedCurrency" id="defaultTaxId" class="form-control"> 
       <option value="AUD">AUD</option>
       <option value="USD" selected="selected">USD</option>
       <option value="NPR">NPR</option>
       <option value="INR">INR</option>
    </select>

我需要这样的输出

<select title="Select your surfboard" class="selectpicker">
  <option>Select...</option>
  <option data-thumbnail="images/icon-chrome.png">Chrome</option>
  <option data-thumbnail="images/icon-firefox.png">Firefox</option>
  <option data-thumbnail="images/icon-ie.png">IE</option>
  <option data-thumbnail="images/icon-opera.png">Opera</option>
  <option data-thumbnail="images/icon-safari.png">Safari</option>
</select>

我怎样才能做到这一点。谁能告诉我

【问题讨论】：

你可以在asp.net mvc中构建一个自定义的Html Helper来实现这个。
任何简单的解决方案
您想将 data-thumbnail 属性放在选项标签上，对吧？我建议您使用带有 MvcHtmlString 的自定义 html 帮助程序构建，例如这个问题：stackoverflow.com/questions/8505264/…。
这能回答你的问题吗？ Razor DropDownListFor: Adding Extra Attribute To SelectList Option Tag

标签： c# html asp.net asp.net-mvc

【解决方案1】：

对我来说最简单的方法是：

我关注了这个问题：SelectListItem with data-attributes

并做了一些修改。

                <select name="@Html.NameFor(model => model.ClientId)"
                        id="@Html.NameFor(model => model.ClientId)"
                        class="form-control selectpicker">
                    <option value="">-- Select --</option>
                    @foreach (var client in Model.Clients)
                    {
                        @if (client.Id == Model.ClientId) //to select the item in edit mode
                        {
                            <option selected
                                    value="@client.Id"
                                    email="@client.Email">
                                @client.Name
                                </option>
                            }
                            else
                            {

                                <option value="@client.Id"
                                        email="@client.Email">
                                    @client.Name
                                </option>
                            }
                    }
                </select>

我添加了这个 javascript 以在更改时绑定一个新属性值的 div。

<script>
    $(document).ready(function () {
        $('.selectpicker').on('change', function (e) {
            $("#emailClient").text($('option:selected', this).attr('email')); //load the email address in a div with id 'emailClient'
        });

        $("#emailClient").text($('option:selected', $('.selectpicker')).attr('email')); //To bind in edit mode
    });
</script>

【讨论】：