选择选项下拉菜单不显示所选选项

Question

我有一个 Blazor 应用程序，它使用数据库中的数据填充 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 值使用明确的日期格式，并且您的属性以相同的日期格式返回它的值，则选择将能够将其 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

        }
    }