How can I set a select element's itemindex to

Question

I'm dynamically adding values to a select element in my View code like so in my View/.cshtml:

@model WebAppRptScheduler.Models.HomeModel
@using System.Data
@{
    DataTable dtUnits = Model.Units as DataTable;
    var units = from x in dtUnits.AsEnumerable()
    select new
    {
        unit = x.Field<string>("unit")
    };
.....    
    <select class="form-control, dropdown" name="unitsselect">
        @foreach (var field in units)
        {
           <option id="selItem_@(field.unit)" value="@field.unit">@field.unit</option>
         }
    </select>
..... 

The values are populating fine, but the first option in the select element is automatically being selected. How can I set it to -1 so that nothing is selected? Can I do it after the foreach loop above, or must I do it using javascript, or can I do it in a C# code-behind file?

Answer 1

You could add a default option outside of the foreach :

<select class="form-control, dropdown" name="unitsselect">
//_________________________^ Remove this comma
     <option value="0" selected>Choose unit please</option>
     @foreach (var field in units)
     {
        <option id="selItem_@(field.unit)" value="@field.unit">@field.unit</option>
     }
</select>

Answer 2

i think you have to add empty value in collection in start so it will get selected or you can do this before loop

<option value="0">Please select</option>

Answer 3

If you don't like virtual/empty elements in <select>. You can add single line of javascript in scripts section, and set ID of <select id="unitselect" ...> element

@section scripts
{
    <script type="text/javascript">
        document.getElementById("unitselect").selectedIndex = -1;
        ...

Answer 4

Like this :

<select class="form-control, dropdown" name="unitsselect">
    <option disabled selected value> -- select an option -- </option>
    @foreach (var field in units)
    {
        <option id="selItem_@(field.unit)" value="@field.unit">@field.unit</option>
    }
</select>

-- select an option -- Will be displayed by default. But if you choose an option,you will not be able select it back

Source : default select option as blank