5

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

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

用户有字段 Type 有选项 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()
{
    ...
});
4

2 回答 2

1

更新 - 添加示例

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

示例 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);

});​</p>

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

于 2012-11-12T18:24:18.190 回答
1

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

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

下面你可以看到一个概念模型，我如何看待这一切（在我的回答结束时，我描述了这个伪代码中没有提供的东西）：

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

于 2012-11-12T19:55:42.770 回答