Динамическая Страна-Государство-Город с использованием пакетов AutoForm и Collection2 в Meteor

Question

Я использую пакет autoform и collection2 и создаю форму в метеоре. На данный момент я добавил жестко запрограммированную опцию для выпадающего списка страна-штат-город, и insert-update работает нормально. Теперь я хочу, чтобы впервые раскрывалась только страна, чтобы включить две другие, отключить. В зависимости от выбора страны будет раскрыт и активирован раскрывающийся список состояний. Затем на основании государственного выбора город должен заселить. Я не хочу делать это вручную. Есть ли способ сделать это с помощью функций 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

Я думаю, что вы можете установить входы штата и города, которые будут отключены

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

Answer 2

Я думаю, что это в некоторой степени ваша идея, 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";...

Вы можете извлечь данные из этого и настроить для вашего приложения. Надеюсь, поможет