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

Question

我正在使用 autoform 和 collection2 包并在meteor中制作表单。截至目前，我为国家 - 州 - 城市下拉列表提供了一些硬编码选项，插入更新工作正常。现在我想第一次只有国家下拉列表启用其他两个是禁用。根据国家/地区选择，州下拉列表将填充并启用。然后根据国家选择城市应该填充。 我不想手动这样做。有没有办法使用 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"}}

任何帮助??

Answer 1

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

// States var s_a = new Array(); s_a[0] = ""; s_a[1] = "Badakhshan|Badghis|Baghlan|Balkh|Bamian|Farah|Faryab|Ghazni|Ghowr|Helmand|Herat|Jowzjan|Kabol|Kandahar|Kapisa|Konar|Kondoz|Laghman|Lowgar|Nangarhar|Nimruz|Oruzgan|Paktia|Paktika|Parvan|Samangan|Sar-e Pol|Takhar|Vardak|Zabol";...

您可以从中提取数据并调整到您的应用。希望它有所帮助

Answer 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事件启用选项

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