HTML/CSS:<select>字段中的嵌套<options>？

Question

是否可以在表单下拉列表中创建嵌套选项字段,就像创建嵌套的ul列表一样？

由于变化只是美学,是否可以用css做到这一点？

Answer 1

您可以使用<optgroup>创建单级嵌套...

<select>
  <optgroup label="Options 1">
     <option>Option 1.1</option>
     <option>Option 1.2</option>
  </optgroup>
  <optgroup label="Options 2">
     <option>Option 2.1</option>
     <option>Option 2.2</option>
  </optgroup>
</select>

示例:http://jsfiddle.net/JaZAm/1/

请注意,组标签不是可选选项.在这种情况下,我建议使用主题链接到其评论中的问题的顶部答案中提到的文本缩进解决方案.

Answer 2

嵌套 Accordeon 选择

\n

我之所以采用这种方法是因为我无法\xc2\xb4t找到我正在搜索的内容。嵌套的手风琴选择。它的CSS非常简单并且可以改进。您唯一需要的是一个包含要添加到选择中的键和值的对象。Keys将是子组，键values（数组和单个元素）将是可选择的项目。

\n

一旦你有了数组，你唯一需要做的就是调用

\n

initAccordeon(obj);\n

\n

将您的数据对象作为参数，然后将出现嵌套的手风琴：

\n

\r\n

\r\n

initAccordeon(obj);\n

\r\n

const obj = {\n  Cars: {\n    SwedishCars: [\n      "Volvo",\n      "Saab"\n    ],\n    GermanCars: [\n      "Mercedes",\n      {\n        Audi: [\n          "Audi A3", \n          "Audi A4", \n          "Audi A5" \n        ]\n      }\n    ]\n  },\n  Food: {\n    Fruits: [\n      "Orange",\n      "Apple",\n      "Banana"\n    ],\n    SaltyFoods: [\n      "Pretzels",\n      "Burger",\n      "Noodles"\n    ],\n    Drinks: "Water"\n  }\n};\n\ninitAccordeon(obj);   // <--------------------------- Call initialization\n\nfunction accordeonAddEvents() {\n  Array.from(document.getElementsByClassName("accordeon-header")).forEach(function(header) {\n    if (header.getAttribute("listener") !== "true") {\n      header.addEventListener("click", function() {\n        this.parentNode.getElementsByClassName("accordeon-body")[0].classList.toggle("hide");\n      });\n      header.setAttribute("listener", "true");\n    }\n  });\n\n  Array.from(document.getElementsByClassName("button-group")).forEach(function(but) {\n    if (but.getAttribute("listener") !== "true") {\n      but.addEventListener("click", function() {\n        if (this.getAttribute("depth") === "-1") {\n          let header = this;\n          while ((header = header.parentElement) && header.className !== "accordeon");\n          header.getElementsByClassName("accordeon-header")[0].innerHTML = this.innerHTML;\n          return;\n        }\n        const groups = Array.from(this.parentNode.getElementsByClassName("accordeon-group"));\n        groups.forEach(g => {\n          if (g.getAttribute("uuid") === this.getAttribute("uuid") &&\n            g.getAttribute("depth") === this.getAttribute("depth")) {\n            g.classList.toggle("hide");\n          }\n        });\n      });\n      but.setAttribute("listener", "true");\n    }\n  });\n}\n\nfunction initAccordeon(data) {\n  accordeons = Array.from(document.getElementsByClassName("accordeon-body"));\n  accordeons.forEach(acc => {\n    acc.innerHTML = "";\n    const route = (subObj, keyIndex = 0, parent = acc, depth = 0) => {\n      const keys = Object.keys(subObj);\n      if (typeof subObj === \'object\' && !Array.isArray(subObj) && keys.length > 0) {\n        while (keyIndex < keys.length) {\n          var but = document.createElement("button");\n          but.className = "button-group";\n          but.setAttribute("uuid", keyIndex);\n          but.setAttribute("depth", depth);\n          but.innerHTML = keys[keyIndex];\n          var group = document.createElement("div");\n          group.className = "accordeon-group hide";\n          group.setAttribute("uuid", keyIndex);\n          group.setAttribute("depth", depth);\n          route(subObj[keys[keyIndex]], 0, group, depth + 1);\n          keyIndex++;\n          parent.append(but);\n          parent.append(group);\n        }\n      } else {\n        if (!Array.isArray(subObj)) subObj = [subObj];\n        subObj.forEach((e, i) => {\n          if (typeof e === \'object\') {\n              route(e, 0, parent, depth);\n          } else {\n              var but = document.createElement("button");\n              but.className = "button-group";\n              but.setAttribute("uuid", i);\n              but.setAttribute("depth", "-1");\n              but.innerHTML = e;\n              parent.append(but);\n          }\n        });\n      }\n    };\n    route(data);\n  });\n  accordeonAddEvents();\n}

\r\n

.accordeon {\n  width: 460px;\n  height: auto;\n  min-height: 340px;\n  font-size: 20px;\n  cursor: pointer;\n  user-select: none;\n  -moz-user-select: none;\n  -khtml-user-select: none;\n  -webkit-user-select: none;\n  -o-user-select: none;\n  display: block;\n  position: relative;\n  z-index: 10;\n}\n\n.accordeon-header {\n  display: inline-block;\n  width: 450px;\n  border: solid 0.1vw black;\n  border-radius: 0.2vw;\n  background-color: white;\n  padding-left: 10px;\n  color: black;\n}\n\n.accordeon-header:hover {\n  opacity: 0.7;\n}\n\n.accordeon-body {\n  display: block;\n  position: absolute;\n}\n\n.button-group {\n  display: block;\n  cursor: pointer;\n  width: 460px;\n  text-align: left;\n  font-size: 20px;\n  font-weight: bold;\n}\n\n.accordeon-group {\n  padding-left: 20px;\n}\n\n.accordeon-group .button-group {\n  width: 100%;\n}\n\n.button-group[depth="-1"] {\n  color: green;\n}\n\n.hide {\n  display: none;\n}

\r\n

\r\n

\r\n

\n