Question

我在表单中有两个不同的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;
        }
    }
});

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

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

所以我有两个问题

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

Answer 1

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

这是一个有效的例子： 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设置第二个列表。

Answer 2

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

$('select').material_select();

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

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

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

Meteor reactive-var根据其他选择元素

2 个答案: