如何表示取决于其他形式的表单选项

Question

我有一个表格，该表单可帮助用户在末尾选择特定的东西，但是当用户填写第一个选项时，其他选项则以下是以下的变化。这样的东西：

Type:
{
    t1:{
        Number of X:{
            1:{...}
            2:{...}
        }
        Number of Y:{...}
    }
    t2:{
        Number of X:{
            100:{...}
            200:{...}
        }
        Number of Y:{...}
    }
}

用户具有带有选项T1和T2的字段类型，当他们选择T1时，X的"数字"将用1和2填充，如果他们选择T2，则将" x"的字段" x"数为充满100和200，等等。某些选择取决于一个以上的字段，其不直接依赖性（例如，如果用户选择" x" = 100，则foo是" a"，否则，foo可以是" a"，" a"，" b"或" c"，但foo并不是bellow" x的数量"）。

我尝试了一个非常幼稚的实现，我将在每个字段上设置事件侦听器并查看他们的更改，但是最终，代码开始失控，我有一堆$("#foo").change(function(){...});这是bar，而不是fbar。

我也尝试了JSON（如上所述），但是重复很多，树的生长越深，并且可能会增加，我必须一次又一次地编写相同的字段。有时选择t1即使它不是直接吼叫，也会直接更改选项，即使它通常完全取决于另一个领域，并且在JSON中更重复。

我如何解决这个问题？有可读解决方案吗？太多的代码不是问题，只要人们可以查看代码并了解依赖项及其效果。

一个代码示例（现在像我的代码一样）：

html：

<select id="type">
<option value=1>a</option>
<option value=2>b</option>
</select>
<select id="numOfX">
</select>
<select id="numOfY">
</select>

JS：

$("#type").change(function()
{
    if($("#type").val() == 1)
    {
        $("#numOfX").append(new Option(1, "1", false, false));
        $("#numOfX").append(new Option(2, "2", false, false));
    }
    else if($("#type").val() == 2)
    {
        $("#numOfX").append(new Option(1, "100", false, false));
        $("#numOfX").append(new Option(2, "200", false, false));
    }
});
$("#numOfX").change(function()
{
    ...
});

Answer 1

更新 - 添加示例

您是否尝试过backbone.js库？通过添加模型＆amp;结构。虽然有一个学习曲线，但确实很棒。一旦学习了骨干，就可以使用骨干表插件，这将有助于下拉管理。以下是演示链接＆amp;示例代码：

示例1

$(function() {
var cities = {
    'UK': ['London', 'Manchester', 'Brighton', 'Bristol'],
    'USA': ['London', 'Los Angeles', 'Austin', 'New York']
};
var subAreas = {
    'London' : ['L1', 'L2', 'L3', 'L4'],
    'Manchester' : ['M1', 'M2', 'M3', 'M4'],
    'Brighton' : ['B1', 'B2', 'B3', 'B4'],
    'Bristol' : ['BR1', 'BR2', 'BR3', 'BR4'],
    'Los Angeles' : ['LA1', 'LA2', 'LA3', 'LA4'],
    'Austin' : ['A1', 'A2', 'A3', 'A4'],
    'New York' : ['NY1', 'NY2', 'NY3', 'NY4']
};

//The form
var form = new Backbone.Form({
    schema: {
        country: { type: 'Select', options: ['UK', 'USA'] },
        city: { type: 'Select', options: cities.UK },
        subArea: { type: 'Select', options: subAreas[cities.UK[0] ] }
    }
}).render();
form.on('country:change', function(form, countryEditor) {
    var country = countryEditor.getValue(),
        newOptions = cities[country];
    form.fields.city.editor.setOptions(newOptions);
    var city = newOptions[0],
        areaOptions = subAreas[city];
    form.fields.subArea.editor.setOptions(areaOptions);
});
form.on('city:change', function(form, cityEditor) {
    var city = cityEditor.getValue(),
        newOptions = subAreas[city];
    form.fields.subArea.editor.setOptions(newOptions);
});
//Add it to the page
$('body').append(form.el);

}）;

示例2

$(function() {
var cities = {
    'UK': ['London', 'Manchester', 'Brighton', 'Bristol'],
    'USA': ['London', 'Los Angeles', 'Austin', 'New York']
};
var subAreas = {
    'UK.London' : ['L1', 'L2'],
    'USA.London' : ['L3', 'L4'],
    'UK.Manchester' : ['M1', 'M2', 'M3', 'M4'],
    'UK.Brighton' : ['B1', 'B2', 'B3', 'B4'],
    'UK.Bristol' : ['BR1', 'BR2', 'BR3', 'BR4'],
    'USA.Los Angeles' : ['LA1', 'LA2', 'LA3', 'LA4'],
    'USA.Austin' : ['A1', 'A2', 'A3', 'A4'],
    'USA.New York' : ['NY1', 'NY2', 'NY3', 'NY4']
};
var hashFunc = function(country, city){
    return country + "." + city;
};

//The form
var form = new Backbone.Form({
    schema: {
        country: { type: 'Select', options: ['UK', 'USA'] },
        city: { type: 'Select', options: cities.UK },
        subArea: { type: 'Select', options: subAreas[ 'UK.London' ] }
    }
}).render();
form.on('country:change', function(form, countryEditor) {
    var country = countryEditor.getValue(),
        newOptions = cities[country];
    form.fields.city.editor.setOptions(newOptions);
    var city = newOptions[0],
        areaOptions = subAreas[hashFunc(country, city) ];
    form.fields.subArea.editor.setOptions(areaOptions);
});
form.on('city:change', function(form, cityEditor) {
    var city = cityEditor.getValue(),
        newOptions = subAreas[hashFunc(form.getValue().country, city)];
    form.fields.subArea.editor.setOptions(newOptions);
});
//Add it to the page
$('body').append(form.el);
});​

当您为移动设备（可能是PhoneGap）开发时，您也可以尝试Zeptojs作为jQuery的替代方案。它将提高速度很多。

Answer 2

由于依赖关系，概述的任务很复杂，因此您必须考虑定义依赖项的方法。这是我要做的一种方法：

• 定义处理数据的模型。
• 定义依赖。
• 管理依赖。

下面您可以看到一个概念模型，我如何看到这一切（在答案的结尾，我描述了此 pseudo 代码中未提供的内容）：

//data/model structure for Type.
var type = {
    //list all values.
    values: [
        { id: 1, text: 't1', visible: true },
        { Id: 2, text: 't2', visible: true }
    ],
    //evaluates visibility of item using dependencies.
    //depends on nothing, so takes no arguments except item.
    evaluate: function(item) {
        return; //depends on nothing.
    },
    // this event fires when selected item changes.
    onChange: event
};
//data/model structure for number of X.
var numberOfX = {
    //list all values.
    values: [
        { id: 1, text: '1', visible: true },
        { id: 2, text: '2', visible: true },
        { id: 3, text: '100', visible: true },
        { id: 4, text: '200', visible: true }
    ],
    //evaluates visibility of item using dependencies.
    //since numberOfX depends on Type, it takes type as second argument.
    //it would take more arguments if it depended on other things too.
    evaluate: function(item, type) {
        // next line will fire onChange event.
        item.visible = 
        ( [1,2].indexOf(item.id) >=0 && type.id == 1 ) ||
        ( [3,4].indexOf(item.id) >=0 && type.id == 2 );
    },
    // this event fires when selected item changes.
    onChange: event
};
//data/model structure for number of Y.
var numberOfY = { /* omitted. This is similar to the previous ones */ }

//numberOfX depends on Type.
//if it depended on more objects, then we would pass them as additional arguments.
register_dependency(numberOfX, type);
//numberOfY depends on Type.
register_dependency(numberOfY, type);
//... etc: define other dependencies.

事件机制在JavaScript中不存在，但是实现一个并不难。您也可以为此使用一些框架。

register_dependency函数仅通过注册事件来构建依赖关系图，如下所述（托管依赖关系）：

当onChange在任何型号上发射事件时，依赖项树中的每个项目都会调用evaluate。例如，当type.onChange发射时，我们有numberOfX和numberOfY对象。他们的values数组在循环中列举了，每个项目都调用evaluate（将item和type作为参数传递）。

结论：尽管此代码似乎很复杂，但它仍然更加自我描述，并且可以在页面上的多个对象之间具有依赖关系图。同样，所有复杂性都置于工具包/框架级别上，仅实施一次时就可以轻松地重复使用。

编辑：忘记概述您需要具有某种机制来绑定到这种模型并在页面上显示它，这也很琐碎。例如，请看一下nockout.js。