选择选项下拉列表不显示所选选项

Question

我有一个Blazor应用程序，它使用来自DB的数据填充6个选择选项下拉列表。其中三个填充了字符串列表中的日期和时间。

当我选择日期和时间时，它不会显示在下拉框中。选择日期时间后，下拉列表为空白，但实际上已选择该值并且绑定有效。它只是没有显示。

如果我删除“bind = @ ...”它会正确显示。有没有其他人经历过这个，你是如何解决的？

<select bind="@Innput.Klokkeslett1">
                        <option value="@(0)">Tid1</option>
                        @foreach (var tid1 in tidListe)
                        {
                            <option value="@tid1">@tid1</option>
                        }
                    </select>

Answer 1

有两点需要注意，select使用字符串值，该值需要与option值匹配。因此，如果您的字段Innput.Klokkeslett1是DateTime，则需要使用属性来处理字符串和DateTime之间的绑定/转换。如果你确保为option值使用明确的日期格式，并且你的属性以相同的日期格式返回它的值，那么select将能够将它的value与其中一个option values匹配并显示相应的文本，这可以以你喜欢的方式格式化。

<select bind="@MySelectProxy">
    <option value="@(0)">Tid1</option>
    @foreach (var tid1 in tidListe)
    {
        <option value="@tid1.ToString("yyyy-MM-dd HH:mm:ss")">@tid1</option>
    }
</select>

@functions
{
string MySelectProxy {
  get => Innput.Klokkeslett1.ToString("yyyy-MM-dd HH:mm:ss");
  set => DateTime.TryParse(value, out Innput.Klokkeslett1); 
  }
}

Answer 2

<select onchange="@ComboSelectionChanged">
        <option value="0" selected>
            @list[0]
        </option>
        @for (int i = 1; i < list.Count; i++)
        {
            <option value="@i">
                @list[i]
            </option>
        }
    </select>    

public void ComboSelectionChanged(UIChangeEventArgs e)
    {
        if (int.TryParse(e.Value.ToString(), out int index))
        {
            SelectedStyleIndex = index
             //now you know which one is selected

        }
    }