How can I set a select element's itemindex to -1?

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?

i think you have to add empty value in collection in start so it will get selected or you can do this before loop — rashfmnb, Apr 20 '16 at 20:55

score 3 · Answer 1 · answered Apr 20 '16 at 20:56

3

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>

answered Apr 20 '16 at 20:56

Zakaria Acharki

66,747
15
75
101

It works; but the comma is needed, otherwise the select appears below the label, which I want to be on the left. – B. Clay Shannon-B. Crow Raven Apr 20 '16 at 21:02
comma isn't needed. class attribute is a space separated list of class names. just remove form-control, – Dmitry Kolchev Apr 20 '16 at 21:18

score 2 · Accepted Answer · edited May 23 '17 at 11:52

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

Dmitry Kolchev · Answer 3 · 2016-04-20T21:07:27.777

2

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

edited Apr 20 '16 at 21:07

answered Apr 20 '16 at 21:06

Dmitry Kolchev

2,116
14
16

Thanks; I may eventually use that, but for now the "reminder" entry is okay. – B. Clay Shannon-B. Crow Raven Apr 20 '16 at 21:07

score 1 · Answer 4 · answered Apr 20 '16 at 20:59

1

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>

answered Apr 20 '16 at 20:59

rashfmnb

9,959
4
33
44

How can I set a select element's itemindex to -1?

4 Answers4

Linked