从 Meteor 中绑定的 Web 表单上的另一个下拉列表更新一个下拉列表答案

【问题标题】：Update one dropdown from another dropdown on a bound web form in Meteor从 Meteor 中绑定的 Web 表单上的另一个下拉列表更新一个下拉列表
【发布时间】：2016-05-02 02:28:20
【问题描述】：

我有一个绑定到现有数据的编辑表单。我有两个下拉列表，我希望根据特定标准更新每个下拉列表。例如，我是否将assignedTo 设置为空白，将状态更改为UnAssigned，和/或如果我将状态更改为UnAssigned，将AssignedTo 更改为空白等。

状态下拉菜单：

<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>

分配给下拉菜单

<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>

我已经对它们每个都有一个相等帮助器来选择加载表单数据时已经设置的值。我正在考虑将 Reactive Vars 与更改事件一起使用，但我不确定如何准确地实现它，或者我是否走在正确的轨道上。 T

【问题讨论】：

status 和 assignedTo 存储在哪里？这些在收藏中吗？您的案例非常简单，如果您可以直接触摸这两个变量的值，您可能甚至不需要响应式 var。
它们在一个集合中。不过我不确定我是否跟随。

标签： meteor meteor-blaze meteor-helper

【解决方案1】：

假设包含status 和assignedTo 字段的集合称为myCollection：

Template.myTemplate.events({
  'change #status': function(ev){
    ev.stopPropagation();
    var newStatus = $('#status).val();
    if ( newStatus == "UnAssigned" ){ // unset the assignedTo value
      myCollection.update({ _id: this._id },
        { $set: { status: newStatus}, $unset: { assignedTo: true }});
    } else {
      myCollection.update{ _id: this._id },{ $set: { status: newStatus}});
    }
  },
  'change #assignedTo': function(ev){
    ev.stopPropagation();
    var newAssignedTo = $('#assignedTo').val();
    if ( newAssignedTo != "None" ){
      var userId = Meteor.users.findOne({ _id: newAssignedTo });
      myCollection.update({ _id: this._id },{ $set: { assignedTo: newAssignedTo }});
    } else { // unset the assignedTo
    myCollection.update({ _id: this._id },
      { $set: { status: "UnAssigned" }, $unset { assignedTo: true }});
    }
  }
});

请注意，在您的模板中，您缺少一种选择 "None" 作为分配用户值的方法。

【讨论】：

我明白你现在在说什么。我实际上想更改前端的下拉值。让用户看到影响，然后选择是否提交表单。因此，如果从 AssignedTo 下拉列表中删除用户，他们会看到 Status 下拉列表更改为 UnAssigned 例如。然后在提交时更新字段。抱歉，如果我不是很清楚，感谢您抽出宝贵时间回复！

【解决方案2】：

我最终在更改事件中使用了一些 jquery。

'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;
}

我不确定此解决方案是否有更好的方法或陷阱，但它似乎满足了我的需求。

【讨论】：