JavaScript

Прошу помочь с реализацией функции buildOptions.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>3 Динамическое изменение значений элементов списка</title>
<script>
{
"use strict";
function buildOptions(objData, root) {
for (item of objData) {
//Создать виртуальный dom-элемент option. Подсказка document.createElement
//Указать в атрибуте value Значение из объекта objData (item.value, item.name )
//Указать текстовое значение для option. Подсказка option.innerText
//добавить созданный и настроенный элемент в root. Подсказка root.appendChild
}
}

function ResetOptionList(ElementValue) {
//Получаем доступ к форме
let cars = document.forms.cars ;
//Объект содержащий как машины, так и мотоциклы
let listCars = {
moto: [
{
name: "Classic",
value: 1
},
{
name: "Police Cruiser",
value: 2
},
{
name: "Harley Davidson",
value: 3
},
],
cars : [
{
name: "Ford",
value: 1
},
{
name: "Chevy",
value: 2
}
]
}
//Аналогично примеру проверяем значение в value
if(ElementValue == 1) {
//Убираем созданные ранее option из select
cars.OptionList.innerHTML = "";
//Запускаем на выполнение построение option
//Передаем раздел moto (т.к. мотоциклы отображаем) и select
buildOptions( listCars.moto , cars.OptionList);
}
if(ElementValue ==2) {
//Убираем созданные ранее option из select
cars.OptionList.innerHTML = "";
//Передаем раздел cars (т.к. машины отображаем) и select
buildOptions( listCars.cars , cars.OptionList);

}
}
}
</script>
<style>
.typeOfVehicles label {
display: block;
}
</style>
</head>
<body>
<form name="cars" action=" http://www.jimkeogh.com " method="post">
<select name="OptionList" size="5">
<option value=1>Classic</option>
<option value=2>Police Cruiser</option>
</select><br>

<div class="typeOfVehicles">
<label><input type="radio" name="vehicles" checked="true" value=1 onclick="ResetOptionList(this.value);">
Motorcycles</label>
<label><input type="radio" name="vehicles" value=2 onclick="ResetOptionList(this.value);">Cars</label>
</div>
<input name="Submit" value="Submit" type="submit"/>
<input name="Reset" value="Reset" type="reset"/>
</form>
</body>
</html>
АС
Алексей Сорокин
97 
  

 

 

     

    3 Динамическое изменение значений элементов списка 

     

        { 

            "use strict"; 

 

            function buildOptions(optionsArray, selectElement) { 

                optionsArray.forEach((option) => { 

                    const optionElement = document.createElement('option'); 

                    optionElement.text = option.name; 

                    optionElement.value = option.value; 

                    selectElement.add(optionElement); 

                }); 

            } 

 

            function ResetOptionList(ElementValue) { 

//Получаем доступ к форме 

                let cars = document.forms.cars; 

//Объект содержащий как машины, так и мотоциклы 

                let listCars = { 

                    moto: [ 

                        { 

                            name: "Classic", 

                            value: 1 

                        }, 

                        { 

                            name: "Police Cruiser", 

                            value: 2 

                        }, 

                        { 

                            name: "Harley Davidson", 

                            value: 3 

                        }, 

                    ], 

                    cars: [ 

                        { 

                            name: "Ford", 

                            value: 1 

                        }, 

                        { 

                            name: "Chevy", 

                            value: 2 

                        } 

                    ] 

                } 

//Аналогично примеру проверяем значение в value 

                if (ElementValue == 1) { 

//Убираем созданные ранее option из select 

                    cars.OptionList.innerHTML = ""; 

//Запускаем на выполнение построение option 

//Передаем раздел moto (т.к. мотоциклы отображаем) и select 

                    buildOptions(listCars.moto, cars.OptionList); 

                } 

                if (ElementValue == 2) { 

//Убираем созданные ранее option из select 

                    cars.OptionList.innerHTML = ""; 

//Передаем раздел cars (т.к. машины отображаем) и select 

                    buildOptions(listCars.cars, cars.OptionList); 

 

                } 

            } 

        } 

     

     

        .typeOfVehicles label { 

            display: block; 

        } 

     

 

 

 

     

        Classic 

        Police Cruiser 

     

 

     

         

            Motorcycles 

        Cars
Улугбек Холиков
Улугбек Холиков
59 846
Лучший ответ
Ошибка заключается в том, что создавать следует не option, а select.
Как-то так...
  

 

 

     

    Раскрывающийся список 

     

    "use strict";  

        function buildOptions(objData, root) { 

            const create = document.querySelector('#create'); 

            let select = document.createElement('select'); 

            root.appendChild(select); 

            for (let item of objData) {  

                let option = document.createElement('option'); 

                option.value = item; 

                option.text = item; 

                select.appendChild(option); 

            } 

            if (root.hasChildNodes()) { 

                create.remove(); 

            } 

        }  

        function main() { 

            const list = [ 

                "Красный", 

                "Оранжевый", 

                "Жёлтый", 

                "Зелёный", 

                "Глоубой", 

                "Синий", 

                "Фиолетовый" 

            ]; 

            const create = document.querySelector('#create'); 

            const root = document.querySelector('#root'); 

            create.addEventListener("click", buildOptions.bind(null, list, root));

        } 

        window.addEventListener("DOMContentLoaded", main); 

     

 

 

    Создать
Арсен Mарьин
Арсен Mарьин
62 749

Похожие вопросы