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

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

更新 - 添加示例

\n\n

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

\n\n

实施例1

\n\n

$(function() {\nvar cities = {\n    \'UK\': [\'London\', \'Manchester\', \'Brighton\', \'Bristol\'],\n    \'USA\': [\'London\', \'Los Angeles\', \'Austin\', \'New York\']\n};\n\nvar subAreas = {\n    \'London\' : [\'L1\', \'L2\', \'L3\', \'L4\'],\n    \'Manchester\' : [\'M1\', \'M2\', \'M3\', \'M4\'],\n    \'Brighton\' : [\'B1\', \'B2\', \'B3\', \'B4\'],\n    \'Bristol\' : [\'BR1\', \'BR2\', \'BR3\', \'BR4\'],\n    \'Los Angeles\' : [\'LA1\', \'LA2\', \'LA3\', \'LA4\'],\n    \'Austin\' : [\'A1\', \'A2\', \'A3\', \'A4\'],\n    \'New York\' : [\'NY1\', \'NY2\', \'NY3\', \'NY4\']\n};\n\n\n//The form\nvar form = new Backbone.Form({\n    schema: {\n        country: { type: \'Select\', options: [\'UK\', \'USA\'] },\n        city: { type: \'Select\', options: cities.UK },\n        subArea: { type: \'Select\', options: subAreas[cities.UK[0] ] }\n    }\n}).render();\n\nform.on(\'country:change\', function(form, countryEditor) {\n    var country = countryEditor.getValue(),\n        newOptions = cities[country];\n\n    form.fields.city.editor.setOptions(newOptions);\n\n    var city = newOptions[0],\n        areaOptions = subAreas[city];\n\n    form.fields.subArea.editor.setOptions(areaOptions);\n\n});\n\nform.on(\'city:change\', function(form, cityEditor) {\n    var city = cityEditor.getValue(),\n        newOptions = subAreas[city];\n\n    form.fields.subArea.editor.setOptions(newOptions);\n});\n\n//Add it to the page\n$(\'body\').append(form.el);\n

\n\n

});\xe2\x80\x8b

\n\n

实施例2

\n\n

$(function() {\nvar cities = {\n    \'UK\': [\'London\', \'Manchester\', \'Brighton\', \'Bristol\'],\n    \'USA\': [\'London\', \'Los Angeles\', \'Austin\', \'New York\']\n};\n\nvar subAreas = {\n    \'UK.London\' : [\'L1\', \'L2\'],\n    \'USA.London\' : [\'L3\', \'L4\'],\n    \'UK.Manchester\' : [\'M1\', \'M2\', \'M3\', \'M4\'],\n    \'UK.Brighton\' : [\'B1\', \'B2\', \'B3\', \'B4\'],\n    \'UK.Bristol\' : [\'BR1\', \'BR2\', \'BR3\', \'BR4\'],\n    \'USA.Los Angeles\' : [\'LA1\', \'LA2\', \'LA3\', \'LA4\'],\n    \'USA.Austin\' : [\'A1\', \'A2\', \'A3\', \'A4\'],\n    \'USA.New York\' : [\'NY1\', \'NY2\', \'NY3\', \'NY4\']\n};\n\nvar hashFunc = function(country, city){\n    return country + "." + city;\n};\n\n\n//The form\nvar form = new Backbone.Form({\n    schema: {\n        country: { type: \'Select\', options: [\'UK\', \'USA\'] },\n        city: { type: \'Select\', options: cities.UK },\n        subArea: { type: \'Select\', options: subAreas[ \'UK.London\' ] }\n    }\n}).render();\n\nform.on(\'country:change\', function(form, countryEditor) {\n    var country = countryEditor.getValue(),\n        newOptions = cities[country];\n\n    form.fields.city.editor.setOptions(newOptions);\n\n    var city = newOptions[0],\n        areaOptions = subAreas[hashFunc(country, city) ];\n\n    form.fields.subArea.editor.setOptions(areaOptions);\n\n});\n\nform.on(\'city:change\', function(form, cityEditor) {\n\n    var city = cityEditor.getValue(),\n        newOptions = subAreas[hashFunc(form.getValue().country, city)];\n\n    form.fields.subArea.editor.setOptions(newOptions);\n});\n\n//Add it to the page\n$(\'body\').append(form.el);\n});\xe2\x80\x8b\n

\n\n

由于您还针对移动设备（可能是 Phonegap）进行开发，因此您还可以尝试 ZeptoJS 作为 jQuery 的替代品。速度会提高很多。

\n