我正在尝试为电子商务网站制作产品页面,问题是我不知道如何根据用户选择的颜色动态更改产品的可用尺寸。
我突然想到要做这样的事情,但我找不到让 amp-mustache 知道并遍历颜色 [selectedColor].sizes 以显示该颜色可用的尺寸的方法,有什么想法吗?
谢谢!
<amp-list src=".../amp/{{ productId }}" items="." single-item=".">
<template type="amp-mustache">
<select name="color" on="change:AMP.setState({ selectedColor: event.value })">
{{#colors}}
<option value="{{color}}">{{color}}</option>
{{/colors}}
</select>
<select name="size" class="input">
{{#colors[selectedColor].sizes}}
<option value="{{size}}">{{size}}</option>
{{/colors[selectedColor].sizes}}
</select>
</template>
</amp-list>