0

尝试创建一组由谷歌电子表格驱动的 html 表单选项/选择字段，以引导用户进行特定选择。想想有红色、蓝色或黑色可供选择的帽子，有蓝色、绿色或红色可供选择的 T 恤。对于许多行，源数据在 col 1 中具有相同的值，在 col 2 中具有唯一值。颜色特定于每个产品。（电子表格结构无法更改。）

我正在尝试按产品对行进行分组，因此我可以填充产品下拉列表，然后填充与该产品相关的颜色下拉列表。这就是我卡住的地方。

我的数据加载正常，可以做表单显示的东西，只需要了解如何结束如何构造这样的数组：

var productsAndColors = [];
productsAndColors[0] = new Array("hat", ["pink", "red", "blue"]);

只是在这里引用不确定的部分：

for (i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    product = entry.gsx$product.$t;
    productsAndColors[i] = ['', []];
    if (productCheck != product) {
        productsAndColors[i][0] = product;
        thisShape = product;
    }
    color = entry.gsx$color.$t;
    productsAndColors[i][1].push(color);
}

这会为每行创建一个数组，只是似乎无法找到对行进行分组的方法。我意识到这是穴居人。

谢谢你的想法。

http://jsfiddle.net/hartogsmith/SqNNk/

https://docs.google.com/spreadsheet/ccc?key=0AkT3oKFSug31dGhva1lpWkhDOGxKaVJsNnpkZVpNbUE#gid=0

4

1 回答 1

2

为什么不是类型不那么严格的东西呢？

如果您对.value从第一个下拉列表（即：“product”）中将设置/读取为字符串感到满意，那么您可以拥有一个简单的对象：

var products = {
    hat : {
        colours : [ "red", "green", "blue", "black", "grey" ]
    },
    shirt : {
        colours : [ "pink", "salmon", "mauve", "chartreuse" ]
    }
};

它可能更简单：

var products = {
    hat : [ "grey", "gray", "charcoal", "smoke" ],
    shirt : [/*...*/]
};

那么为什么要添加“颜色”作为每个属性呢？
仅仅因为它是一个对象的形容词，您可能想要添加更多形容词：.size : [], .shipping_options : [], .cut : [].

shirt : {
    size : [],
    logo : [],
    cut  : []
}

而且您真的不想最终陷入：

products[0][1][1]
products[1][2][3]

世界。

尝试这个：

var Products = {},
    product_type,
    current_value,
    color_arr;

for (...) {
    product_type  = entry.gsx$product.$t;
    current_value = entry.gsx$color.$t;

    Products[product_type] = Products[product_type] || { colors : [] };
    /* same as:
        if (!Products.hat) { Products.hat = { colors : [] }; }
        ...basically, Products.hat == itself, else a new object
    */
    color_arr = Products[product_type].colors;
    color_arr.push(current_value);

}

现在，你可以说Products.hat.colors[1]

如果你像这样设置你的第一个下拉列表：

<select name="product">
    <option value="hat"  >Cap</option>
    <option value="shirt">Tee</option>
</select>

然后：

var type = product_select.value,
    avail_colours = Products[type].colors;
于 2013-09-20T03:06:36.327 回答