Jquery JSON数组用作DropDownList中可用选项的矩阵

我在XSLT样式表中有一些例程，它们处理XML文件以在网页（ASP.NET）中向用户显示产品。XSLT样式表输出html以显示产品以及产品的任何变体，如大小、颜色、包数量、样式等

这些变化是任意处理的。实际上，我的代码中没有一个具体提到这些变体。XML始终包含产品可以具有的变量的节点树。然后每个产品都包含这些变化。例如，在XML中：

<Variations>
    <Variation>
        <Name>Color</Name>
    </Variation>
    <Variation>
        <Name>Size</Name>
    </Variation>
</Variations>

另一个JSON对象包含所有可能的产品配置列表，如下所示：

var propCtlMap = [{"Color": "ddColor","Size": "ddSize"}]

var datalist = [
{"pID": "000001","Color": "Green","Size": "6"},
{"pID": "000002","Color": "Multiple(orange)","Size": "6"},
{"pID": "000003","Color": "Multiple(purple)","Size": "6"},
{"pID": "000004","Color": "Multiple(red)","Size": "6"},
{"pID": "000005","Color": "Purple","Size": "6"},
{"pID": "000006","Color": "Green","Size": "8"},
{"pID": "000007","Color": "Multiple(orange)","Size": "8"},
{"pID": "000008","Color": "Multiple(purple)","Size": "8"},
{"pID": "000009","Color": "Multiple(red)","Size": "8"},
{"pID": "000010","Color": "Purple","Size": "10"},
etc, etc
]

到目前为止，我所有的工作。我有处理DropDownList

.change

的JQuery事件。然后将所有选择的变体选项映射到产品ID。这允许我在隐藏字段中包含产品ID，以便当用户单击“添加到购物车”按钮时，处理他们的选择。同样，所有这些都很好

现在谈谈我的具体问题。。。我希望能够禁用不可用/没有库存的变体选项。我知道可以禁用下拉列表中的选择。我有用ASP编写的代码。我想我可以将其转换为JQuery，但我不知道如何确定（在JQuery中，从上面的

datalist

）哪些选项不可用。在上面的

datalist

中，有3种可能的尺寸-6、8和10。绿色尺码有6号和8号，但没有10号。同样，紫色的尺码有10号，但没有6号或8号

我认为一定有一些使用JQuery/Javascript的方法/函数可以帮助我生成所有选项的矩阵，这样我就可以禁用无效的选项。在上面的例子中，如果用户选择了紫色，我需要该颜色的所有可用尺寸的列表。同样，如果用户选择了8号，我想要一个该尺寸的所有可用颜色的列表

我想如果我知道如何获取这些列表，我就可以处理大部分剩余的编码

顺便说一句，我学习JQuery/Javascript才两周。我知道的很少，但我能理解

谢谢。

您可以使用jQuery的函数筛选阵列：

var objectArray = JSON.parse(json);

var purpleElements = $.grep(objectArray, function (element, index) {
    // purpleElements will contain all of those values in objectArray for which
    // this function returns true.
    return element.Color === "Purple";
});

$.each(purpleElements, function (index, element) {
    alert(element.Color + ": " + element.Size);
});

将发出警报：

Purple:6

，

Purple:10

如果您只需要一个大小列表，那么可以使用jQuery函数转换数组：

var sizes = $.map(purpleElements, function (element, index) {
    // sizes will contain an array of the return values of this function
    // for each element in purpleElements.
    return element.Size;
});

$.each(sizes, function (index, element) {
    alert(element);
});

将发出警报

6

，

10

看

您可以使用jQuery的函数筛选数组：

var objectArray = JSON.parse(json);

var purpleElements = $.grep(objectArray, function (element, index) {
    // purpleElements will contain all of those values in objectArray for which
    // this function returns true.
    return element.Color === "Purple";
});

$.each(purpleElements, function (index, element) {
    alert(element.Color + ": " + element.Size);
});

将发出警报：

Purple:6

，

Purple:10

如果您只需要一个大小列表，那么可以使用jQuery函数转换数组：

var sizes = $.map(purpleElements, function (element, index) {
    // sizes will contain an array of the return values of this function
    // for each element in purpleElements.
    return element.Size;
});

$.each(sizes, function (index, element) {
    alert(element);
});

将发出警报

6

，

10

---

看

很好，理查德。这给了我一个很好的线索。现在我需要弄清楚如何使它武断。我可以将此代码放入函数中，然后从我的

.change

事件调用该函数。我知道是什么控件触发了

.change

，我可以从我的propCtlMap JSON对象中确定属性名（大小、颜色等）。我也会有实际大小或颜色（等）的选择。我不确定如何才能使

元素.Color

和

元素.Size

代码通用。到目前为止，我的代码任意处理这些属性。我没有提到“颜色”或“大小”等。在这里设置

var purpleElements=$.grep…

最后一行是

return element.Color==“紫色”-是否可以使用
返回元素[elementname]==selectionval？我知道“selectionval”不会有问题，但我如何通过字符串引用元素名而不是作为对象名？我只是想弄明白如何使这段代码完全通用。我想除了
元素.Color
代码之外，我已经掌握了所有内容。幸运的是，我认为javascript允许您按照您描述的方式引用对象属性：
元素[attributeName]==selectionval
。很好，理查德。这给了我一个很好的线索。现在我需要弄清楚如何使它武断。我可以将此代码放入函数中，然后从我的
.change
事件调用该函数。我知道是什么控件触发了
.change
，我可以从我的propCtlMap JSON对象中确定属性名（大小、颜色等）。我也会有实际大小或颜色（等）的选择。我不确定如何才能使
元素.Color
和
元素.Size
代码通用。到目前为止，我的代码任意处理这些属性。我没有提到“颜色”或“大小”等。在这里设置
var purpleElements=$.grep…
最后一行是
return element.Color==“紫色”-是否可以使用
返回元素[elementname]==selectionval？我知道“selectionval”不会有问题，但我如何通过字符串引用元素名而不是作为对象名？我只是想弄明白如何使这段代码完全通用。我想除了
元素.Color
代码之外，我已经掌握了所有内容。幸运的是，我认为javascript允许您按照您描述的方式引用对象属性：
元素[attributeName]==selectionval
。