javascript - 骨干形式。Node.js 文档示例：Onchange Populator：如何隐藏第二个选择并在更改事件后显示它？

Question

这是我想从中学习的文档中的代码。在我看来，当更改事件被触发时，隐藏第二个选择并显示它会很酷。我尝试了一些功能注入，但效果不佳。谁能给这个问题2美分？

(function($) {
    var cities = {
        'UK': ['London', 'Manchester', 'Brighton', 'Bristol'],
        'USA': ['Washington DC', 'Los Angeles', 'Austin', 'New York']
    };

    //The form
    var form1 = new Backbone.Form({
        schema: {
            country: { type: 'Select', options: ['UK', 'USA'] },
            city: { type: 'Select', options: cities.UK },
            message: { type: 'Text'}
        }
    }).render();

    form1.on('country:change', function(form1, countryEditor) {
        var country = countryEditor.getValue(),
            newOptions = cities[country];
            form1.fields.city.editor.setOptions(newOptions);

    });

    //Add it to the page
    $('body').append(form1.el);
})(jQuery);

Answer 1

form1.fields['message'].$el.hide();

渲染后和

form1.fields['message'].$el.toggle(); 在 on change 函数里面解决了这个问题。

(function($) {
    var cities = {
        'UK': ['London', 'Manchester', 'Brighton', 'Bristol'],
        'USA': ['Washington DC', 'Los Angeles', 'Austin', 'New York']
    };

    //The form
    var form1 = new Backbone.Form({
        schema: {
            country: { type: 'Select', options: ['UK', 'USA'] },
            city: { type: 'Select', options: cities.UK },
            message: {  
                //fieldAttrs: { style: 'width: 400px; height:300px;' }, 
                type: 'TextArea',
                fieldClass: 'message-input', 
                validators: [ 'required', /.{20,}/ ] 
            }
        }
    }).render();
    **form1.fields['message'].$el.hide();**

    *form1.on('country:change',* function(form1, countryEditor) {
        var country = countryEditor.getValue(),
            newOptions = cities[country];
            form1.fields.city.editor.setOptions(newOptions);
            **form1.fields['message'].$el.toggle();**
    });

    //Add it to the page
    $('body').append(form1.el);
})(jQuery);