在流星中使用AutoForm和Collection2包的Dynamic Country-State-City

问题描述：

我正在使用autoform和collection2包和制作流星形式。截至目前，我为国家 - 城市下拉菜单插入了一些硬编码选项，插入更新工作正常。现在我想第一次只有国家下拉是启用其他两个禁用。根据国家选择，各国的下拉列表将填充并启用。然后基于州选择城市应该填充。我不想手动执行此操作。有没有办法使用autoform/collection2功能???我的代码示例如下：在流星中使用AutoForm和Collection2包的Dynamic Country-State-City

Collection2模式：

country:{ 
    type: String, 
    label : "Country", 
    autoform: { 
     afFieldInput: { 
      type: "select" 
     }, 
     options: function() { 
      return [ 
       {label: 'Country1', value: 'Country1'}, 
       {label: 'Country2', value: 'Country2'}, 
       {label: 'Country3', value: 'Country3'}, 
       {label: 'Country4', value: 'Country4'} 
      ]; 
     } 
    } 
},  
state:{ 
    type: String, 
    label : "State", 
    autoform: { 
     afFieldInput: { 
      type: "select" 
     }, 
     options: function() { 
      return [ 
       {label: 'State1', value: 'State1'}, 
       {label: 'State2', value: 'State2'}, 
       {label: 'State3', value: 'State3'}, 
       {label: 'State4', value: 'State4'} 
      ]; 
     } 
    } 
},  
city:{ 
    type: String, 
    label : "City", 
    autoform: { 
     afFieldInput: { 
      type: "select" 
     }, 
     options: function() { 
      return [ 
       {label: 'City1', value: 'City1'}, 
       {label: 'City2', value: 'City2'}, 
       {label: 'City3', value: 'City3'}, 
       {label: 'City4', value: 'City4'} 
      ]; 
     } 
    } 
},

HTML ::

{{> afQuickField name='country' template="bootstrap3-horizontal" label-class="col-sm-4" input-col-class="col-sm-8"}} 
{{> afQuickField name='state' template="bootstrap3-horizontal" label-class="col-sm-4" input-col-class="col-sm-8"}} 
{{> afQuickField name='city' template="bootstrap3-horizontal" label-class="col-sm-4" input-col-class="col-sm-8"}}

任何帮助？

答

我觉得这有点你有想法，https://jsfiddle.net/bdhacker/eRv2W/ // Countries var country_arr = new Array("Afghanistan", "Albania", "Algeria", "American Samoa", "Angola", "Anguilla", "Antartica"...

您可以提取该数据并调整到你的应用程序。希望它可以帮助

答

我觉得你可以设定国家和本市的输入被禁用

country:{ 
    type: String, 
     label : "Country", 
     autoform: { 
     afFieldInput: { 
      type: "select" 
     }, 
     options: function() { 
      return [ 
       {label: 'Country1', value: 'Country1'}, 
       {label: 'Country2', value: 'Country2'}, 
       {label: 'Country3', value: 'Country3'}, 
       {label: 'Country4', value: 'Country4'} 
      ]; 
     } 
    } 
}, 
state:{ 
    type: String, 
     label : "State", 
     autoform: { 
     afFieldInput: { 
      type: "select", 
      disabled:true 
     }, 
     options: function() { 
      return [ 
       {label: 'State1', value: 'State1'}, 
       {label: 'State2', value: 'State2'}, 
       {label: 'State3', value: 'State3'}, 
       {label: 'State4', value: 'State4'} 
      ]; 
     } 
    } 
}, 
city:{ 
    type: String, 
     label : "City", 
     autoform: { 
     afFieldInput: { 
      type: "select", 
      disabled:true 
     }, 
     options: function() { 
      return [ 
       {label: 'City1', value: 'City1'}, 
       {label: 'City2', value: 'City2'}, 
       {label: 'City3', value: 'City3'}, 
       {label: 'City4', value: 'City4'} 
      ]; 
     } 
    } 
},

，并使用模板事件启用的选项

Template.YOURTEMPLATENAME.events({ 
    'change input[name="country"]' :function(){ 
     if ($('input[name="country"]').value() != ''){ 
      $('input[name="state"]').attr('disabled',''); 
     }else { 
      $('input[name="state"]').attr('disabled','disabled'); 
     } 
    }, 
    'change input[name="state"]' :function(){ 
     if ($('input[name="state"]').value() != ''){ 
      $('input[name="city"]').attr('disabled',''); 
     }else { 
      $('input[name="city"]').attr('disabled','disabled'); 
     } 
    } 
});

在流星中使用AutoForm和Collection2包的Dynamic Country-State-City

相关推荐