Meteor 尝试填充单选按钮的“选择”下拉列表

默认值应为带文本区域框的选中单选按钮。选中第二个单选按钮后，文本区域框必须替换为带值的下拉列表。我的代码如下

<div>
  <label><input type="radio" name="billingcustname" value="new" id="billingcustname_0" checked="checked">New </label>
        {{#if showNewCustomer}}
            {{> newcustomer}}
        {{else}}
            {{> existingcustomer}}
        {{/if}}
  <label><input type="radio" name="billingcustname" value="existing" id="billingcustname_1">Existing</label>
</div>
<template name="newcustomer">
  <input type="text" class="form-control newCust" placeholder="Customer Name">
</template>

<template name="existingcustomer">
<select id="dropdown" class="form-control existCust">
    <option value="0" disabled="">Please select</option>        
    <option value="1800FLOWERS BPO AUTOMATION" selected="">1800FLOWERS AUTOMATION</option>      
</select>
</template>

刚出现的
{{#如果showNewCustomer}
{{>newcustomer}
{{else}
{{>现有客户}
{{/if}
现有的
请选择
1800花卉自动化

尝试在助手中使用会话来填充您的

。最好的是它们是反应性的，所以你会得到你的“即时”效果

{{{#每个选项}
{{this}}
{{/每个}}
Template.name.helpers({
选项：函数（）{
return Session.get（'options_from_radio'）；
}
});
Template.name.events({
“单击#billingcustname_0”：函数（）{
var new_options=['value1'、'value2'、'value3']；
Session.set（'options\u from\u radio'，new\u options）；
}
});

---

当然，上面的代码可以通过在默认情况下添加会话数组来改进，在数组中设置对象（用于值和文本），而不是字符串，例如

[{value=“ch1”，text=“Choose me first”}，{…}，{…}]

等。

@Radu是正确的

为设置会话变量的单选按钮创建事件处理程序

添加获取会话变量的模板帮助器

要在单选按钮上显示事件，您还需要将该html包装到模板中（始终是良好的做法，您应该在模板之外没有html）

html:

<template name="selector">
  <div>
    <label><input type="radio" name="billingcustname" value="new" id="billingcustname_0" checked="checked">New </label>
    {{#if showNewCustomer}}
      {{> newcustomer}}
    {{else}}
      {{> existingcustomer}}
    {{/if}}
    <label><input type="radio" name="billingcustname" value="existing" id="billingcustname_1">Existing</label>
  </div>
</template>

Template.selector.events({
  'click #billingcustname_0': function() {
    Session.set('showNewCustomer',true);
  },
  'click #billingcustname_1': function() {
    Session.set('showNewCustomer',false);
  }
});

Template.selector.onRendered(function(){
    Session.set('showNewCustomer',true);
});

Template.selector.helpers({
  showNewCustomer: function(){
    return Session.get('showNewCustomer');
  }
});

就我个人而言，对于如此简单的事情，这似乎需要很多代码。我很想回到jQuery，在单击单选按钮时切换页面上元素的可见性

Template.selector.events({
  'click #billingcustname_0': function() {
    Session.set('showNewCustomer',true);
  },
  'click #billingcustname_1': function() {
    Session.set('showNewCustomer',false);
  }
});

Template.selector.onRendered(function(){
    Session.set('showNewCustomer',true);
});

Template.selector.helpers({
  showNewCustomer: function(){
    return Session.get('showNewCustomer');
  }
});