html5 - 如何在下拉菜单中为子项添加空间？

我正试图在下拉选择列表中显示父子元素
我有foreach中的代码

@helper GetOption(List<Project_Cost_Management_System.Models.ChartOfAccount> model1, Guid? parentid)
{
    foreach (var item3 in model1.Where(s => s.ParentAccountId.Equals(parentid)))
    {


        var zs3 = model1.Where(s => s.ParentAccountId == item3.Id);
        int count3 = zs3.Count();
        if (count3 >= 0)
        {
            if(@item3.ParentAccountId == null)
            {
             <option value="@item3.Id">@item3.Name</option>
            }
            else
            {
                var cout = model1.Count();
                <option value="@item3.Id"> @item3.Name   @model1.Where(s => s.dataid == @item3.dataparentid).Select(d => d.Name).First(). </option>
            }
        }
        if (count3 > 0)
        {
            @GetOption(model1, item3.Id)
        }

    }
}

但它表现为
我如何才能显示为第一张图片。

最佳答案

您可以使用<optgroup>实现所需的功能，因此呈现的HTML最终将类似于：

<option value="...">Professional Fees</option>
<optgroup label="Property Related Expenses">
    <option value="...">Maintenance Contribution</option>
    ...
</optgroup>
...

您可能遇到的唯一问题是，您的实际分组本身不是有效的选项，也就是说，您不能选择“与属性相关的费用”，因为它只是一个分组标签。您也不能通过这种方式真正控制右对齐的描述性文本。一般来说，HTMLselect元素限制性很强，不允许进行大量定制。
当你需要更多的高级功能时，你必须移动某种类型的库来创建一个“控件”，用更可定制的HTML元素来模拟select列表的功能。互联网上有一百万个不同的图书馆，但我特别喜欢Select2.js。特别是对于您的场景，请参见“模板化”一节。

关于html5 - 如何在下拉菜单中为子项添加空间？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31339052/