8

I've tried searching the web and trying out different things with my code. I know how to add a placeholder for a textbox, but how about adding one for an MVC 5 dropdownlistfor?

I have the following code, but will not put the placeholder in the dropdownlist. 

@Html.DropDownListFor(model => model.CustomerID, new SelectList(ViewBag.Customers, "CustomerID", "Email", null, new { htmlAttributes = new { @class = "form-control", @placeholder = "-Select-" } }))

What would be the syntax I would need to accomplish this?

sagesky36
  • 4,542
  • 19
  • 82
  • 130
  • possible duplicate of [DropdownListFor default value](http://stackoverflow.com/questions/7229626/dropdownlistfor-default-value) – John H Feb 12 '15 at 02:58
  • 2
    `@Html.DropDownListFor(m => m.CustomerID, new SelectList(ViewBag.Customers, "CustomerID", "Email", "-Please select-", new { @class = "form-control",})` add "-Please select-" as a 'label' option with a null value. –  Feb 12 '15 at 03:00
  • I would agree with JohnH and StephenMuecke if their interpretation of "placeholder" as "default value" is correct. – Sam Axe Feb 12 '15 at 03:12
  • It doesn't work... Putting the "-Please select-" in that spot, the dropdownlist expects that that value is going to be the selected value which, is not in the table as one of the options. Nor do I want it to be. That being the case, if that's the only way to include it (being in the table as a selected option from a DB call), there is no other way to put a placeholder on the dropdownlist? – sagesky36 Feb 12 '15 at 03:24
  • Generally you add the `[Required]` attribute to the property, then both client side (if you have added `ValidationMessageFor()` and server side validation add an error if your don't select one of the 'real' options. –  Feb 12 '15 at 04:19

2 Answers2

25

Try this:

@Html.DropDownListFor(model => model.CustomerID, 
    new SelectList(ViewBag.Customers, "CustomerID", "Email"), 
    "-- Please Select --", 
    new { htmlAttributes = new { @class = "form-control" } })

3rd overload can be the "placeholder" (optionLabel).

A select box doesnt have a "placeholder" like text inputs do.

mnsr
  • 12,337
  • 4
  • 53
  • 79
  • Ps, this still works if you have a selected item in the select list. Ie if there is no selected item it shows place holder, else it shows the selected value. – Zapnologica Sep 14 '16 at 09:17
  • is there a way to set this default option to disabled so they cannot select it? – J-Roel Apr 06 '18 at 20:21
0

I know that my answer comes very late but as I've struggled a lot with this issue I would like to share my solution with you. On the project I work, I'm using bootstrap and I wanted for the placeholder to be displayed when nothing is selected and also if an item is selected to be able to save with the placeholder(allowing to save null in the db)

@Html.DropDownListFor(model => model.CustomerID, 
    new SelectList(ViewBag.Customers, "CustomerID", "Email"), 
    "-- Please Select --", 
    new { htmlAttributes = new { @class = "form-control", data_placeholder= "-- Please Select --"  } })

Also I've added style to my drop down list using js: 

function initCustomerDropdown() {
        $("#CustomerID").addClass('select2_demo_3 form-control');
        $("#CustomerID").select2({
            allowClear: true,
            width: '100%'
        });
    }

So when no item was selected, "-- Please Select --" was displayed and when an item is selected the allow clear property allowed me to clear the search displaying the placeholder and allowing me to save null.

Hope this will help. Cheers!

Alexandru Hobincu
  • 1