Question

我有一个表单可以帮助用户在最后选择一个特定的东西，但是当用户填写第一个选项时，下面的其他选项会发生变化。像这样：

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

用户的字段Type为选项t1和t2，当他们选择t1时，字段“Number of X”将填充1和2，如果他们选择t2，则字段“Number of X”将是填充100和200，依此类推。一些选择取决于多个字段，它不是直接依赖（例如，如果用户选择“Number of X”= 100则Foo为“A”，否则，Foo可以是“A”，“B”或“C”，但Foo并不低于“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库？通过添加模型和扩展，它将使Javascript代码更易于管理。结构。虽然有一个学习曲线，但它真的很棒。学习Backbone后，您可以使用Backbone Forms插件，这将有助于下拉管理。以下是演示链接＆amp;示例代码：

Example 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);

}）;

Example 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

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

定义处理数据的模型。
定义依赖关系。
管理依赖项。

下面你可以看到一个概念模型我如何看到这一切都已实现（在我的答案的最后我描述了这个伪代码中没有提供的东西）：

//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作为参数传递。）

结论：虽然这段代码看起来很复杂，但它仍然更具自描述性，并允许在页面上的多个对象之间绘制依赖关系图。此外，所有复杂性都存在于工具包/框架级别，只有在实现一次时才能轻松重用。

编辑：忘了勾勒出你需要有一些机制来绑定到这种模型并在页面上显示它，这也是微不足道的。例如，请查看knockout.js。

如何表示依赖于其他表单的表单选项

2 个答案: