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

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

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的数量”将填充100和200，依此类推。有些选择依赖于多个字段，而不是直接依赖性（例如，如果用户选择“X的数量”=100，则Foo是“A”，否则，Foo可以是“A”、“B”或“C”，但Foo不低于“X的数量”）

我尝试了一个非常简单的实现，在其中我会在每个字段上设置事件侦听器并查看它们的更改，但最终代码开始失控，我有一堆

$（“#foo”）.change（function（）{…}）

而且听这个的字段是

bar

而不是

fbar

这一点并不明显

我也尝试了JSON（如上面的例子），但是有很多重复，树越深，可能性越大，我必须一次又一次地写相同的字段。有时，选择

t1

会直接更改选项，即使它不是直接在选项下面，而且它通常完全依赖于另一个字段，这在JSON中更为重复

我如何处理这个问题？有可读的解决方案吗？太多的代码不是问题所在，只要你能看到代码并理解依赖关系及其影响

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

HTML:

---

更新-添加示例

您尝试过backbone.js库吗？通过添加模型和结构，它将使Javascript代码更易于管理。虽然有一个学习曲线，但它真的很棒。一旦你学会了主干，你就可以使用这个插件，这将有助于下拉管理。下面是演示链接和示例代码：

}))；​

---

在为移动设备（可能是Phonegap）开发时，您也可以尝试ZeptoJS作为jQuery的替代方案。这将大大提高速度。

概述的任务由于依赖关系而复杂，因此您必须考虑定义依赖关系的方法。我有一个办法：

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

下面您可以看到一个概念模型，我如何看到这些都实现了（在我的回答末尾，我描述了在这个伪代码中没有提供的东西）：

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

register\u dependency

函数只需注册事件即可构建依赖关系图，如下所述（管理依赖关系）：

当对任何模型触发

onChange

事件时，将为依赖关系树中的每个项调用

evaluate

。例如，当触发

type.onChange

时，我们有

numberOfX

和

numberOfY

对象。循环中枚举它们的

值

数组，并为每个项调用

求值

（将

项

和

类型

作为参数传递）

结论：虽然这段代码看起来很复杂，但它更具自描述性，允许在页面上的多个对象之间建立依赖关系图。此外，所有的复杂性都取决于工具箱/框架级别，只要实现一次，就可以很容易地重用

---

编辑：忘了概述您需要一些机制来绑定到这种模型并在页面上显示它，这也很简单。例如，看看。

你所说的“选项”是什么意思？您能否更新您的问题以包含示例HTML表单？表单字段如何映射到该

类型

对象属性？可测试的实际代码示例比冗长的描述更有意义。我现在不能写太多，但明天我会发布一个更详细的例子。@Jay我添加了一个例子。你用的服务器端语言是什么？我是说这个表单连接到数据库了，对吗？@ryan不，一点也不。它只是Javascript。这是一个简单的iPhone应用程序。你有没有一个例子说明存在多个级别的依赖关系？例如，选择伦敦将在下面打开更多选项，但美国也有伦敦，因此这些新选项基于英国伦敦或美国伦敦。嗨，卢克，很抱歉回复太晚。您可以看到我修改后的示例具有更多依赖性。希望它能有所帮助：）在这个例子中，伦敦是英国和美国的一个城市。在伦敦下面有L1、L2、L3、L4区。如果你想玩的话，可以随意修改JSFIDLE链接。谢谢你的回复。我想我不清楚我的第一个评论，我的意思是英国伦敦与美国伦敦有不同的选择，比如，L1和L2子区域来自英国，L3和L4子区域来自美国。我添加了另一个示例，为第三级创建了一个非常简单的哈希。这就是你的意思吗？

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

$("#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()
{
    ...
});

$(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);

$(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);
});​

//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.