Javascript 按 optgroup 对 select 的选项进行分组

Question

我正在尝试将我的选项值分组到 optgroups 中。我目前将选项保存为
--型号--
奥迪#A4 (2003-2009)
奥迪#A5 (2003-2009)
大众#帕萨特 B7 (2003-2009)
大众#帕萨特 B8 (2003-2010)

对于 JS，它们应该像这样分组：
--型号--
奥迪
A4 (2003-2009)
A5 (2003-2009)
大众
帕萨特 B7 (2003-2009)
帕萨特 B8 (2003-2010)

我有以下构建选项的代码


      for (var i=0;i<l;i++){
      var opt = options[i].split('#');
        select[0].options[i+1] = new Option(opt[1],options[i]);

    }

我可以设法按字符 # 拆分选项文本，并在默认 option/text“--model--”之后添加第一个选项。有人可以帮忙用 optgroup 分组吗？

提前致谢

Answer 1

如果您以数组的形式从数据库中获取数据，您可以这样做

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>make select element</title>
</head>
<body>
    <script>
        let arr = [
            "AUDI#A4 (2003-2009)",
            "AUDI#A5 (2003-2009)",
            "VW#Passat B7 (2003-2009)",
            "VW#Passat B8 (2003-2010)"
        ]
        let tempObj = {}
        arr.forEach(val =>{
            let newVal = val.split("#");
            if (tempObj[newVal[0]] === undefined) {
                tempObj[newVal[0]] = [newVal[1]]
            }else{
                tempObj[newVal[0]].push(newVal[1])
            }
        })
        let selectElement = document.createElement("select");

        for (const val in tempObj) {
            let createOpt = document.createElement("optgroup");
            createOpt.setAttribute("label",val)

            tempObj[val].forEach(value =>{
                let option = document.createElement("option");
                option.innerText = value;
                createOpt.appendChild(option);
            })
            selectElement.appendChild(createOpt);
        }

        document.body.appendChild(selectElement);

            
    </script>
</body>
</html>

Javascript 按 optgroup 对 select 的选项进行分组

Javascript grouping of option of select by optgroup

javascript

optgroup