<fieldset>
<label for="field-one">Количество комнат</label>
<select id="field-one" name="rooms">
<option value="1" selected>1 комната</option>
<option value="2">2 комнаты</option>
<option value="3">3 комнаты</option>
<option value="10">10 комнат</option>
</select>
</fieldset>
<fieldset>
<label for="field-two">Количество мест</label>
<select id="field-two" name="capacity">
<option value="1" selected>1 гость</option>
<option value="2">2 гостя</option>
<option value="3">3 гостя</option>
<option value="0">нет гостей</option>
</select>
</fieldset><!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<select id="field-one"> </select>
<select id="field-two"> </select>
<script type="text/javascript">
"use strict";
let select1 = [
{
id: 0,
text: '1 комната'
}, {
id: 1,
text: '2 комнаты'
}, {
id: 2,
text: '3 комнаты'
}, {
id: 3,
text: '10 комнат'
}
];
let select2 = [
{
id: 0,
is: [0, 1, 2],
text: '1 гость'
}, {
id: 1,
is: [1, 2],
text: '2 гостя'
}, {
id: 2,
is: [2],
text: '3 гостя'
}, {
id: 3,
is: [3],
text: 'Нет гостей'
}
];
let fieldOne = document.getElementById("field-one");
let fieldTwo = document.getElementById("field-two");
createOptions(fieldOne, select1);
eventChange.call(fieldOne, fieldTwo);
fieldOne.addEventListener("change", eventChange.bind(fieldOne, fieldTwo));
function eventChange(field) {
field.textContent = "";
let filtered = select2.filter(o => o.is.includes(+this.value));
createOptions(field, filtered);
}
function createOptions(field, arrO) {
for (let o of arrO) {
let option = document.createElement("option");
option.textContent = o.text;
option.setAttribute("value", o.id);
field.append(option);
}
}
</script>
</body>
</html>