Пытаюсь сделать зависимый список, но так, чтобы он постоянно проходил проверку того, что в нём выбрано. При этом он работает, но начинает постоянно увеличиваться при каждом клике. Как этого избежать?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="col" id="calc">
<select class="form-control" name="door_frame_type" id = "door_frame_type">
<option>Без коробки</option>
<option>Сосна</option>
</select>
<select class="form-control mt-2" name="door_frame_material" id = "door_frame_material">
</div>
<script>
let calc = document.getElementById("calc")
let door_frame_type = document.getElementById("door_frame_type");
let type_frame = {birch_pine : ["Сосна", "50% сосна / 50% лиственница", "Лиственница", "50% сосна / 50% дуб", "Дуб",],}
calc.addEventListener("change", function a() {
if (door_frame_type.value == "Сосна") {
door_frame_material.add(new Option (type_frame.birch_pine[0]))
door_frame_material.add(new Option (type_frame.birch_pine[1]))
door_frame_material.add(new Option (type_frame.birch_pine[2]))
door_frame_material.add(new Option (type_frame.birch_pine[3]))
door_frame_material.add(new Option (type_frame.birch_pine[4]))
}
}
)
</script>
</body>
</html>