Meteor reactive-var 根据其他选择元素中的选择更新一个选择元素答案

【问题标题】：Meteor reactive-var update one select element based on choice in other select elementMeteor reactive-var 根据其他选择元素中的选择更新一个选择元素
【发布时间】：2016-03-28 20:52:34
【问题描述】：

我在一个表单中有两个不同的select 元素

当我在第一个列表中选择一个选项时，我希望在第二个列表中自动设置相应的选项。我做了一些尝试，使用reactive-var 接近它的工作，但我需要一些帮助。

我的模板是这样的

<template name="inputForm">
    <div class="section">
        <form action="#">
            <div class="row">
                <div class="input-field col m4">
                    <select id="list-one">
                        <option value="" disabled selected>Choose your option</option>
                        <option value="1">100</option>
                        <option value="2">75</option>
                        <option value="3">50</option>
                        <option value="4">25</option>
                        <option value="5">25</option>
                    </select>
                    <label>Select List 1</label>
                </div>
                {{{secondListVar}}}
            </div>
        </form>
    </div>
</template>

然后在我的模板帮助文件中

var secondListVar = new ReactiveVar("<div class='input-field col m4'><select id='list-two'><option value=''  selected>Choose your option</option></select><label>Select List 2</label></div>");

Template.inputForm.helpers({
    secondListVar: function() {
        return secondListVar.get();
    }
});

Template.inputForm.events({
    'change #list-one' : function() {
        var listOneChoice = $('#list-one option:selected').text();
        switch (listOneChoice) {
            case "100":
                secondListVar.set("<div class='input-field col m4'><select id='list-two'><option value=''  selected>1.5</option></select><label>Select List 2</label></div>");
                break;
            case "75":
                break;
            case "50":
                break;
            case "25":
                break;
            case "25":
                break;
        }
    }
});

如果我从第一个列表中选择一个选项，第二个列表似乎会被清除

但是如果我单击导致模板被隐藏/显示的单选按钮，我会得到这个

所以我有两个问题

渲染似乎不是动态的，因为我需要手动强制它
当我得到显示的第二个列表选项时，第一个列表的相应状态丢失了

【问题讨论】：

从您的secondListVar 中删除您的 html 标记，将其放入您的模板中
仍然不会改变结果

标签： javascript jquery html meteor

【解决方案1】：

如果您想使用 ReactiveVar，我建议将第二个列表创建为 html，并在自动运行中设置其选择。

这是一个工作示例： http://meteorpad.com/pad/JLkM8ftKQuKhBvF3r/Lists

<template name="Main">

      <label>Select List 1</label>
      <select id="list-one">
          <option value="" disabled selected>Choose your option</option>
          <option value="1">100</option>
          <option value="2">75</option>
          <option value="3">50</option>
          <option value="4">25</option>
          <option value="5">25</option>
      </select>


      <label>Select List 2</label>
      <select id="list-two">
          <option value="" disabled selected>Choose your option</option>
          <option value="1">100</option>
          <option value="2">75</option>
          <option value="3">50</option>
          <option value="4">25</option>
          <option value="5">25</option>
      </select>

    </template>

    var SelectedItem = new ReactiveVar();
    Template.Main.events({
        'change #list-one' : function() {
          var selected = $('#list-one option:selected').val();
          SelectedItem.set(selected);
        }
    });

    Template.Main.onCreated(function(){

      this.autorun(function(){
        var selected = SelectedItem.get();
      $('#list-two option').eq(selected).prop('selected', true);
      });

    })

但是，您甚至可能不需要 ReactiveVar，在这种情况下，您可以根据需要直接通过 jquery 设置第二个列表。

【讨论】：

我认为如果不使用全局变量，这个答案可能会更好......你为什么拒绝我的版本？
meteorpad 链接已失效。我已经按照你展示的那样实现了，但由于某种原因，autorun 似乎没有运行
如果我将它从 onCreated 移动到 rendered 它会运行，但 $('#list-two option').eq(selected).prop('selected', true); 不会做任何事情
它正在设置选项，但只是不更新它的呈现方式，即第二个列表仍然显示 Choose your option 但如果我在控制台中运行它 $('#list-two option:selected').val(); 它返回 2 或其他我在列表 1 中选择的选项
这是一个不工作的例子meteorpad.com/pad/DRm8H8iBeNuyiR3N9/Leaderboard

【解决方案2】：

@looshi 的答案是正确的，但我也遇到了问题，因为 materialize 包现在根据解决方法posted here 排序在my meteorpad example 中

【讨论】：

【解决方案3】：

我在使用 Materialise 时遇到了类似的问题。您的表单选择下拉菜单是由 Materialize 根据最初呈现页面时的值创建的。每次都需要重新运行初始化代码：

$('select').material_select();

这是一个基于从 Iron 路由器数据函数中获取值的示例：

Tracker.autorun(function(e){
  var data = Router.current().data();

  Tracker.afterFlush(function(){
    //dom is now created.
    $('select').material_select();
  });
});

【讨论】：