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

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 的数量”将为填充 100 和 200，依此类推。有些选择取决于多个字段，它不是直接向下依赖(比如，如果用户选择“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有助于下拉管理的插件。下面是演示链接和示例代码:

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 的替代品。它将大大提高速度。