在 Meteor 中使用 AutoForm 和 Collection2 包的动态 Country-State-City答案

【问题标题】：Dynamic Country-State-City using AutoForm and Collection2 package in Meteor在 Meteor 中使用 AutoForm 和 Collection2 包的动态 Country-State-City
【发布时间】：2015-08-28 12:36:52
【问题描述】：

我正在使用 autoform 和 collection2 包并在流星中制作表格。到目前为止，我为国家-州-城市下拉列表设置了一些硬编码选项，并且插入更新工作正常。现在我想第一次只有国家下拉菜单是启用其他两个是禁用的。根据国家/地区选择，州下拉菜单将填充并启用。然后根据州选择城市应该人口。我不想手动执行此操作。有没有办法使用 autoform / collection2 功能来做到这一点？？？我的代码示例如下：

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

有什么帮助吗？？

【问题讨论】：

标签： meteor meteor-autoform meteor-helper meteor-collection2

【解决方案1】：

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

您可以从中提取数据并根据您的应用进行调整。希望对你有帮助

【讨论】：

【解决方案2】：

我认为您可以将州和城市的输入设置为禁用

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

【讨论】：