Не знаю, должна ли быть связь между кол-вом комнат и площадью, при выборе именно площади - стоимости выдаёт разные, соответственно придуманным мной тарифам. Количество комнат в этом примере не учитывается.
Код закомментировал, где в него влез и что-то переписал/добавил
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="select-locations select">
<label for="location" class="location-label">Расположение</label>
<select class="select-street select-location" name="select-street" id="select-street" required>
<option value="sunny" selected="selected">ул.Солнечная</option>
<option value="kobceva">ул.Кобцева</option>
<option value="gagarina">ул.Гагарина</option>
</select>
</div>
<br>
<div class="amount select area" id="input-select">
<label for="amount">Количество комнат</label>
<select class="select-room select-layout" name="select-room" id="select-room" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="layout-flat select">
<label for="layout">Общая площадь</label>
<select class="select-area area-block" name="select-area2" id="select-area" required>
</select>
<h3 class="last-price select">Цена <span class="price"></span></h3>
</body>
<script>
function selectStreet(room,rooms){
room.innerHTML = "";
var c = this.value || "sunny", o;
for(let i = 0; i < rooms[c].length; i++){
o = new Option(rooms[c][i],i,false,false);
room.add(o);
};
}
function selectRoom(area,areas){
area.innerHTML = "";
var c = this.value || 1, o;
for(let i = 0; i < areas[c].length; i++){
// эту строчку модернизировал, чтобы в атрибут value выводилась площадь квартиры
o = new Option(areas[c][i],areas[c][i],false,false);
area.add(o);
};
}
function showPrice(tariffs,street,area){
// модифицировал вашу функцию
const selectElement = document.querySelector('.select-area');
selectElement.addEventListener('change', (event) => {
var street_option=street.value; // получаем значение улицы
var area_option=area.value; // получаем площадь квартиры
var tariff=tariffs[street_option]; // выбираем тариф
var cost=area_option*tariff; // перемножаем площадь квартиры на тариф
const result = document.querySelector('.price');
// вставляем вычисленную цену в '.price'
result.textContent = cost;
});
}
document.addEventListener("DOMContentLoaded", function(){
var rooms = {
sunny: ["1", "2", "3"],
kobceva: ["1", "2", "3"],
gagarina: ["1", "2"]
};
var areas = {
1: ["41.27", "46.96", "48.31"],
2: ["68.33", "69.64", "70.97", "72.39"],
3: ["67.31", "67.60","86.23", "94.54"]
};
// поскольку вы не указали, какой будет алгоритм расчёта цен,
// я решил, что это будут тарифы, зависящие от улицы
// при желании, можете усложнить структуру и прописать свою цену для каждого набора квартир
// тогда и в функции showPrice() нужно будет побольше факторов учитывать
// в строке var tariff=tariffs[street_option]; // выбираем тариф - навигация будет иметь больше [ ] скобок
var tariffs = {
sunny: 100, // для улицы sunny квадратный метр стоит 100 ед.
kobceva: 200, // для улицы kobceva квадратный метр стоит 200 ед.
gagarina: 300 // для улицы gagarina квадратный метр стоит 300 ед.
}
var street = document.getElementById("select-street");
var room = document.querySelector("#select-room");
var area = document.querySelector("#select-area");
selectStreet(room,rooms);
selectRoom(area,areas);
street.addEventListener('change',selectStreet(room,rooms))
room.addEventListener('change',selectRoom(area,areas))
showPrice(tariffs,street,area);
})
</script>
</html>
