Select options based on other selection

help
1

Hello everyone,
i have two html select elemets.

The first select is shows all items of a collection.

Now the second select element should show all elements of a collection based on the selected id of the first select element.
How can i do that?

First select element:

<select class="form-control">
    {{#each getFloors}}
        <option value="{{_id}}">{{name}}</option>
    {{/each}}
</select>

Second select element:

<select class="form-control">{
    {#each getRoomsByFloorId "**ID OF THE FIRST SELECTION**"}}
        <option value="{{_id}}">{{name}}</option>
    {{/each}}
</select>

Do you have any ideas?

2

Use a ReactiveVar that tracks the selection of the first select. Something like this

<template name="Floors">
 <select class="form-control floors">
    {{#each floor in getFloors}}
        <option value="{{floor._id}}">{{floor.name}}</option>
    {{/each}}
 </select>
 <select class="form-control rooms">{
    {#each room in getRoomsByFloorId floorId}}
        <option value="{{room._id}}">{{room.name}}</option>
    {{/each}}
 </select>
</template>

Template.Floors.onCreated(function(){
 this.floorId = new ReactiveVar(null);
});
Template.Floors.events({
 'change select.floors'(event, instance) {
  instance.floorId.set(event.currentTarget.value);
 }
});
Template.Floors.helpers({
 floorId(){
  return Template.instance().floorId.get();
 },
 getRoomsByFloorId(floorId) {
  //
 }
});