如何將自定義屬性添加到Html.DropDownListFor選項值而不是選擇值

Question

@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>

我怎樣才能做到這一點。 請任何人都可以告訴我

Answer 1

對我來說最簡單的方法是：

我遵循了這個問題： 帶有數據屬性的SelectListItem

並做了一些修改。

                <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>