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

Question

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

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

Answer 1

如果你想用select元素做,而且你不需要两个以上的级别,那么你可以使用optgroup.

CSS样式有限.据我知道,对于select本身就可以改变的事情一样color,background,border,font,text-align.

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

你能做什么:你可以用不同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>