How to add custom attribute to Html.DropDownListFor option value instead of select value

Question

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

The above code out the below line of code

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

I need a output like this

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

How can I achieve this. Please can anyone tell me

You can build a custom Html Helper in asp.net mvc to achieve this. — Kumar, Sep 02 '16 at 04:22
You want putting data-thumbnail attribute on option tag, right? I suggest you using custom html helper build with `MvcHtmlString` like this problem: http://stackoverflow.com/questions/8505264/html-dropdownlistfor-with-custom-parameter. — Tetsuya Yamamoto, Sep 02 '16 at 04:41
Does this answer your question? [Razor DropDownListFor: Adding Extra Attribute To SelectList Option Tag](https://stackoverflow.com/questions/19171014/razor-dropdownlistfor-adding-extra-attribute-to-selectlist-option-tag) — Nasser Hadjloo, Jan 14 '22 at 10:39

score 0 · Answer 1 · answered Jan 10 '19 at 02:44

The easyest way for me is this:

I followed this question: SelectListItem with data-attributes

And did some modifications.

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

I added this javascript to bind a div on change with new attribute value.

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

How to add custom attribute to Html.DropDownListFor option value instead of select value

1 Answers1