JSFiddle - React, Tailwind, and code Playground

by Maxim_Wolf

HTML

<select id="rooms">
<option value="1"> 1 room</option>
<option value="2"> 2 room</option>
<option value="3"> 3 room</option>
<option value="100"> 100 room</option>
</select>

<select id ="guests">
<option value="1">1 guests</option>
<option value="2">2 guests</option>
<option value="3">3 guests</option>
<option value="0">no guests</option>
</select>

JavaScript

const settings = {
  "1": ["1"],
  "2": ["1","2"],
  "3": ["1","2","3"],
  "100": ["0"],
}

const guests = document.querySelector("#guests");
const rooms = document.querySelector("#rooms");

const syncGuests = ()=>{
  
  const currentRooms = rooms.value;  
  const currentGuests = settings[currentRooms];
  [...guests.children].forEach((option)=>option.disabled=currentGuests.every((setting)=>setting!==option.value));
  
};

rooms.addEventListener("change",syncGuests);

//sync начальное состояния
syncGuests()