Mvc dropdownlist default value and placeholder - text

Question

I have a html.dropdownlist which have 4 options. I want it to display a placeholder text a defaut which is not included in the options. I implemented a similar thing with adding a default option to the list, however selected default option is causing div to expand and it distrups the page layout.
<div style="float:left; padding-left:13.4%;">
#Html.DropDownList("Adults", ViewData["Adults"] as List<SelectListItem>, new { #class = "dropdown2"})
</div>
And that is the controller code;
List<SelectListItem> adt = new List<SelectListItem>();
//adt.Add(new SelectListItem
//{
// Text = "1",
// Value = "1"
//});
adt.Add(new SelectListItem
{
Text = "1",
Value = "1"
});
adt.Add(new SelectListItem
{
Text = "2",
Value = "2"
});
adt.Add(new SelectListItem
{
Text = "3",
Value = "3"
});
adt.Add(new SelectListItem
{
Text = "4",
Value = "4"
});
ViewData["Adults"] = adt;
return View();
Im new with mvc and any contribution will be appreciated. Thank you.

Answer 1

Adding placeholder text when its not directly implemented is tricky if not impossible. I recommend using Chosen (JQuery Plugin) instead. It is very easy to use and makes the dropdown beautiful.
https://harvesthq.github.io/chosen/
Example of a dropdown with chosen:
#Html.DropDownListFor(model => model.Example, Model.Example, new { #class = "chosen", data_placeholder="Choose items"})

Answer 2

You can add jquery code to add option to the dropdownlist with the select attribute so the option will be set as a placeholder:
$('#selectid').append($('<option/>', {
value: value,
text : value
}));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id='selectid'>
<option value="" disabled selected>Select your option</option>
<option value="hurr">Durr</option>
</select>

Answer 3

If you are using ASP.NET MVC 5 then you can use overloaded method of #Html.DropDownList
with perameter type string optionLabel.
which will add a new option in select list at first index. will be default selected. and if your default options always selected then no need for placeholder.
#Html.DropDownList("Adults", ViewData["Adults"] as List<SelectListItem>, "Select Adult",new { #class = "dropdown2"})