3

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

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

3 回答 3

5

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

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

对于optgroupand option,你可以改变......好吧,同样的事情。您还可以使用不同的样式设置所选选项[selected] {/*styles*/}。你不能改变paddingmargin......这样的事情。并且尝试嵌套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>
于 2012-07-22T11:41:23.697 回答
3

如果您想使用 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());
        }
   );

  }
);

结果屏幕

在此处输入图像描述

于 2012-07-22T12:51:47.440 回答
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 }

以获得更可预测的渲染。

于 2012-07-22T18:24:04.093 回答