具有条件字段的主干形式

backbone-forms with conditional fields

本文关键字：有条件 字段      更新时间：2023-09-26

首先要感谢骨干表单的开发人员，他们制作了一个完美集成在backbone.js框架中的工具。

我将backbone.js与主干表单插件一起使用，但我需要制作条件字段。

假设我有以下表格。我想根据select中选择的值显示（或不显示）带有文本或文本区域的单行输入。

<form method="post" action="">                  
    <select > 
        <option value="" selected="selected">choose one</option>
        <option value="1" >line</option>
        <option value="2" >area</option>
    </select>
    <input id="element_1" /> 
    <textarea id="element_2" ></textarea> 
</form>

像这样的行为是在主干网中默认实现的吗？

如果没有，我如何用javascript和backone表单实现它？

谢谢。

您可以将事件绑定到select元素，并让它们切换其他表单元素的可见性。

试试这个：

$(function() {
    //The form
    var form = new Backbone.Form({
        schema: {
            inputType: { type: 'Select', options: ['line', 'area'] },
            line: 'Text',
            area: 'TextArea'
        }
    }).render();
    form.fields['area'].$el.hide();
    form.on('inputType:change', function(form, editor) {         
        form.fields['line'].$el.toggle();
        form.fields['area'].$el.toggle();
    });
    //Add it to the page
    $('body').append(form.el);
});

以下是一些实时代码：http://jsfiddle.net/shioyama/grn6y/

由此衍生：https://groups.google.com/d/topic/backbone-forms/X5eVdTZWluQ/discussion

没有默认实现。其实，完全靠自己也很简单，请参考以下代码：

//Pseudo code 
var line = $("element_1"),area = $("element_2");
if(selectvalue ==="1"){
  line.show();
  area.hide();
}
else{
  line.hide();
  area.show();
}
相关文章：