function toggleDisplayingRooms(nameSelect){
if(nameSelect){
firstroom = document.getElementById("firstroom").value;
secondroom = document.getElementById("secondroom").value;
thirdroom = document.getElementById("thirdroom").value;
fourthroom = document.getElementById("fourthroom").value;
if(firstroom == nameSelect.value){
hideAllRoomsExcept("displayingFirstAdultChild");
}
else if(secondroom == nameSelect.value){
hideAllRoomsExcept("displayingSecondAdultChild");
}else if(thirdroom == nameSelect.value){
hideAllRoomsExcept("displayingThirdAdultChild");
}else if(fourthroom == nameSelect.value){
displayAllRooms();
}
}
}
function toggleDisplayingChildAge(nameSelect, room){
// body...
if(nameSelect && room){
first_child_col = document.getElementById(room + "_first_child_col").value;
second_child_col = document.getElementById(room + "_second_child_col").value;
if(first_child_col == nameSelect.value){
hideAllChildAges();
document.getElementById("displaying_first_child_age_" + room).style.display = "block";
}
else if(second_child_col == nameSelect.value){
document.getElementById("displaying_first_child_age_" + room).style.display = "block";
document.getElementById("displaying_second_child_age_" + room).style.display = "block";
}else {
hideAllChildAges();
}
}
}
/* HTML code for room service options */
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="row">
<div class="form-group">
<div class="col-sm-1">
<label>Rooms</label>
<select id="rooms" onchange="toggleDisplayingRooms(this);" class="form-control">
<option id="empty">Select</option>
<option id="firstroom" value="1">1</option>
<option id="secondroom" value="2">2</option>
<option id="thirdroom" value="3">3</option>
<option id="fourthroom" value="4">4</option>
<option id="fifthroom" value="5">5</option>
<option id="sixthroom" value="6">6</option>
</select>
</div>
</div>
</div>
...
This is a snippet of code for a room service feature that displays rooms based on selected options. It works fine when selecting individual rooms, but experiences issues when trying to display all rooms at once or selecting child options. The functionality needs to be modified for better user experience.