html树状选择,HTML中的树状选择

使用SELECT元素将无法工作。您可以基于此创建自定义SELECT：

CSS：

* {

margin: 0;

padding: 0;

}

.select, .select-tree {

border: 1px solid black;

width: 200px;

overflow: hidden;

list-style-type: none;

margin: 10px;

}

.select .group-label {

background-color: white;

}

.select .option-label {

background-color: white;

display: block;

}

.select .hidden-checkbox {

display: none;

}

.select .hidden-checkbox:checked + .option-label,

.select-tree .hidden-checkbox:checked ~ .group-children,

.select-tree .hidden-checkbox:checked ~ .group-children * {

background-color: lightblue;

}

.select-tree .group-children {

list-style-type: none;

padding-left: 20px;

}

.select-tree .option-label {

padding-left: 5px;

}

.select-list .level-0 {

padding-left: 10px;

}

.select-list .level-1 {

padding-left: 20px;

}

.select-list .level-2 {

padding-left: 30px;

}HTML：

从列表中选择许多(组不可选)：

1. option 1

2. group 1

3. option 2

4. group 2

5. option 3

6. option 4

7. option 5

从列表中选择一个(组不可选)：

1. option 1

2. group 1

3. option 2

4. group 2

5. option 3

6. option 4

7. option 5

从树中选择一个(组可选)：

1. option 1

2. group 1

   1. option 2

   2. group 2

      1. option 3

      2. option 4

3. option 5

仅限IE9 +(并且你必须为msie提供文档类型)...

我认为如果没有“level-x”css类，你就无法做到这一点，因为通过嵌套的div，填充将会抵消标签的彩色背景。

通过IE8-你必须使用javascript来为标签着色...