Question

我不是问如何生成它，而是如何格式化它。是否有任何用于此目的的字符集？我的直观方法是使用以下值的选项：

master
    |-- foo 1
    |-- foo 2
        |-- bar 1

Answer 1

如果您想使用select元素并且不需要两个以上的级别，那么您可以使用optgroup。

CSS样式有限。据我所知，对于select本身，您可以更改color，background，border，font，text-align等内容。< / p>

对于optgroup和option，您可以更改......嗯，相同的事情。您还可以使用[selected] {/*styles*/}以不同方式设置所选选项的样式。您无法更改padding或margin ......这样的事情。并且尝试嵌套optgroup也不起作用。

你可以做什么：你可以不同地设置不同的optgroup和option的样式（使用类，nth-child，属性选择器）。

Demo

如果您需要很多级别，那么使用嵌套列表可能会更好。

<ul>
    <li>master
        <ul>
            <li>foo 1</li>
            <li>foo 2
                <ul>
                    <li>bar 1</li>
                </ul>
            </li>    
        </ul>
    </li>
</ul>

Answer 2

如果您想使用javascript或jQuery操作select列表，这是我的解决方案

<select name="hierarchies">
<option class="level_1">Computer Science</option>
   <option class="level_2">Java</option>
      <option class="level_3">Martin Fowler</option>
      <option class="level_3">Ian Galloway</option>
<option class="level_1">Computer Engr</option>
   <option class="level_2">C#</option>
      <option class="level_3">John Skeet</option>
      <option class="level_3">Phil Haack</option>
      <option class="level_3">Marc Garvel</option>
<option class="level_1">C</option>
</select>

然后使用jQuery或JavaScript根据级别重新格式化内容

$(document).ready(
 function(){

   $('.level_2').each(
        function(){
            $(this).text('------'+$(this).text());
        }
   );

   $('.level_3').each(
        function(){
            $(this).text('---------'+$(this).text());
        }
   );

  }
);

结果屏幕

enter image description here

Answer 3

盒子绘图字符或多或少都是出于这样的目的。至少，您将使用U + 251C BOX图纸垂直和右“├”和U + 2500 BOX图纸LIGHT HORIZONTAL“─”。例如，

<select>
<option>master
<option>&nbsp;&nbsp;&nbsp;&#x251c;&#x2500; foo 1
<option>&nbsp;&nbsp;&nbsp;&#x251c;&#x2500; foo 2
<option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x251c;&#x2500; bar 1
</select>

然而，很难使符号很好地对齐。如上所述使用无中断空格是一个粗糙的工具，最重要的是，字符宽度会有所不同 - 因此您可以考虑使用CSS规则，如

 select, option { font-family: Consolas, monospace }

获得更可预测的渲染。

如何在选择输入中表示分层数据？

3 个答案: