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

Question

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

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

Answer 1

如果你想用一个 select 元素来做，并且你不需要超过两个级别，那么你可以使用optgroup.

CSS 样式是有限的。据我所知，对于它select本身，您可以更改诸如color, background, border, font,之类的东西text-align。

对于optgroupand option，你可以改变......好吧，同样的事情。您还可以使用不同的样式设置所选选项[selected] {/*styles*/}。你不能改变padding或margin......这样的事情。并且尝试嵌套optgroups 也不起作用。

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

演示

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

<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());
        }
   );

  }
);

结果屏幕

Answer 3

方框图字符或多或少是出于这样的目的。至少，你会使用 U+251C BOX DRAWINGS LIGHT VERTICAL 和 RIGHT “├” 和 U+2500 BOX DRAWINGS 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 }

以获得更可预测的渲染。