select2显示第一个选项而不是占位符

Question

I have this in my .cshtml

@Html.DropDownListFor(m => m.Attendance.Time02InId, new SelectList(Model.ClockingLocations, "Id", "Name"), new {@class = "form-control select2-allow-clear"})

Model.ClockingLocations = List of Clock

public class Clock
{
    public int Id { get; set; }
    public string Name { get; set; }
}

Here's my jquery on document ready

    var placeholder = "Select...";

    $(".select2-allow-clear").prepend("<option></option>");

    $(".select2-allow-clear").select2({
        allowClear: true,
        placeholder: placeholder,
        width: null
    });

However, my select list still shows the first item of my Model.ClockingLocations when m.Attendance.Time02InId has no value, instead of my placeholder.

Answer 1

Try updating your JQuery code

var placeholder = "Select...";

$(".select2-allow-clear").prepend("<option></option>");

$(".select2-allow-clear").select2({
    allowClear: true,
    placeholder: placeholder,
    width: null
});

with

var placeholder = "Select...";

$(".select2-allow-clear").prepend("<option value='' selected='selected'></option>");

$(".select2-allow-clear").select2({
    allowClear: true,
    placeholder: placeholder,
    width: null
});

You can also try replacing

$(".select2-allow-clear").prepend("<option></option>");

with

$(".select2-allow-clear").prepend("<option value=''></option>").val('');

Hope this helps you.