Javascript группировка опций выбора по optgroup - PullRequest
Новая
       31

Javascript группировка опций выбора по optgroup

0 голосов
/ 16 марта 2020

Я пытаюсь сгруппировать значения опций в optgroups. В настоящее время у меня есть параметры, сохраненные как
--model -
AUDI # A4 (2003-2009)
AUDI # A5 (2003-2009)
VW # Passat B7 (2003-2009)
VW # Passat B8 (2003-2010)

С JS они должны быть сгруппированы следующим образом:
- модель -
AUDI
A4 (2003-2009)
A5 (2003-2009)
VW
Passat B7 (2003-2009)
Passat 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]);

    }

Мне удается разделить текст опции с помощью символа # и добавить первую опцию после опции по умолчанию / текста "--model--". Может кто-нибудь помочь с группировкой с optgroup.

Заранее спасибо

1 Ответ

1 голос
/ 16 марта 2020

Если вы получаете данные из вашей базы данных в виде массива, вы можете сделать что-то вроде этого 

<!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>

Пожалуйста, примите ответ, нажав галочку, если это решит вашу проблему.

...