Update one dropdown from another dropdown on a bound web form in Meteor

Question

I have an edit form that is bound to existing data. I have two dropdowns that I would like have update each up depending on specific criteria. For example, is I set the assignedTo to blank, change the status to UnAssigned, and/or if I change the status to UnAssigned, change the AssignedTo to be blank, etc.

Status Dropdown:

<select class="form-control edit-status" id="status" name="status">
        <option selected="{{equals status 'UnAssigned'}}" value="UnAssigned">UnAssigned</option>
        <option selected="{{equals status 'Open w Vendor'}}" value="Open w Vendor">Ticket with Vendor</option>
        <option selected="{{equals status 'Not Started'}}" value="Not Started">Not Started</option>
        <option selected="{{equals status 'In Progress'}}" value="In Progress">In Progress</option>
        <option selected="{{equals status 'Reopened'}}" value="Reopened">Reopened</option>
      </select>

Assigned To Dropdown

<select class="form-control edit-assigned-to" id="assignedTo" name="assignedTo">
        <option value="" selected="{{equals assignedTo ''}}">Select a User</option>
        {{#each users}}
          <option value="{{_id}}" selected="{{equals ../assignedTo _id}}">{{services.auth0.name}}</option>
        {{/each}}
      </select>

I already have an equality helper on each of them to pick the value that is already set when loading the form data. I was thinking of using Reactive Vars with change events, but I'm unsure how to exactly to implement that or if I'm even on the right track. T

Answer 1

I ended up using some jquery in my change events.

'change .edit-status': function(event, template){
  var status = event.target.value;
  if (status === "UnAssigned") {
    $(".edit-assigned-to").val("");
  }
  return false;
},

'change .edit-assigned-to': function(event, template){
  var assignedTo = event.target.value;
  if (!template.data.assignedTo && assignedTo !== "") {
    $(".edit-status").val("Not Started");
  }
  if (assignedTo === "") {
    $(".edit-status").val("UnAssigned");
  }    
  return false;
}

I'm not sure if there are better approaches or pitfalls to this solution, but it seems to be meeting my needs.