1

我正在使用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"}}

有什么帮助吗？？

4

2 回答 2

0

我认为这有点像你的想法，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";...

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

于 2015-08-03T16:14:35.587 回答
0

i think you can set the inputs of state and city to be disabled 

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'}
            ];
        }
    }
},

and use Template event to enable the options

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');
        }
    }
});
于 2015-08-28T04:36:52.243 回答