如何在下拉列表中为子项添加 space？

Question

我正在尝试在下拉列表中显示父子元素 select list.as 下图

我有 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)
        }

    }
}

但显示为

如何显示为第一张图片

Answer 1

您可以使用 <optgroup> 来实现您正在寻找的东西，因此您渲染的 HTML 最终会是这样的：

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

您可能遇到的唯一问题是您的实际分组本身不是有效选项，即您不能选择 "Property Related Expenses"，因为它只是一个分组标签。您也无法通过这种方式真正控制右对齐的描述性文本。一般而言，HTML select 元素非常严格，不允许大量自定义。

当您需要更多高级功能时，您必须移动某种创建 "control" 的库，该库模仿具有更多可自定义 HTML 元素的 select 列表的功能。互联网上有一百万个不同的此类库，但我特别喜欢 Select2.js。特别是对于您的场景，请参阅 "Templating".

部分

Answer 2

我得到答案了。

在模型 class 中添加另一个字段作为层次结构。

使用层次结构添加 space。我添加我的代码以供参考。

@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
            {
                int str = @item3.Hierarchy * 3;
                string str1 = " ".ToString().PadRight(str);
                str1 = str1.Replace(" ", "\u00a0");
                <option value="@item3.Id">@str1 @item3.Name</option>

            }
        }
        if (count3 > 0)
        {
            @GetOption(model1, item3.Id)
        }

    }
}

如何在下拉列表中为子项添加 space？

how to add space for child item in dropdown?

html

html-helper

razor

asp.net-mvc-5