Amp html 如何在amp web中创建多个选择框，根据另一个组合框值选择哪一个组合框

选择1
汽车
鞋
书
食物
选择2
一个例子
{“键”：“，
“a”：[“梅赛德斯”、“宝马”]，
“b”：[“凉鞋”、“红鞋”]，
“c”：[“小说”、“漫画”]，
“d”：[“大米”、“米”]
}

屏幕截图显示的内容是否高于您的预期结果？如果是这样，您只是缺少了看起来像amp表单脚本（如果amp绑定脚本是您正在运行的唯一脚本）

---

也可以查看上的页面。这可能有助于实现您的目标。

正如克雷格所建议的，您需要使用

amp list

和

amp mustache

生成内容

amp-list

可以使用

[src]

绑定获取其结果，并将使用提供的

模板对每个结果进行迭代

不幸的是，我没有设法让
amp list
仅呈现
选项
标记。
一个有效的解决方法是生成
select
标记，如链接的下拉列表示例所示。

为此，您应该将项目包装在一个对象中，这样
amp list
就没有数组，只有一个对象，并且只渲染一次模板，但是您可以在
mustache
中迭代结果

您可以这样做：

<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

<amp-state id="jsonData">
<script type="application/json">
  {
    "key": "a",
    "a": {"items": [{"name": "mercedes"},{"name": "bmw"}]},
    "b": {"items": [{"name": "sandal"},{"name": "red shoes"}]},
    "c": {"items": [{"name": "novel"},{"name": "comic"}]},
    "d": {"items": [{"name": "rice"},{"name": "mie"}]}
  }
  </script>
</amp-state>

<form method="GET" class="p2" action="/" target="_top">
  <div class="ampstart-input form-elem">
    <label for="sel1" class="form-label">Select1</label>
    <select name="sel1" id="sel1" on="change:AMP.setState({jsonData: {key : event.value}})">
      <option value="a">car</option>
      <option value="b">shoes</option>
      <option value="c">book</option>
      <option value="d">food</option>
    </select>
  </div>
  <div class="ampstart-input form-elem">
    <amp-list [src]="jsonData[jsonData.key]" items="." layout="fixed-height" width="auto" height="25">
      <template type="amp-mustache">
        <label for="sel2" class="form-label">Select2</label>
        <select name="sel2" id="sel2">
          {{#items}}
            <option>{{name}}</option>
          {{/items}}
        </select>
      </template>
    </amp-list>
  </div>
</form>


{
“钥匙”：“a”，
“a”：{“items”：[{“name”：“mercedes”}，{“name”：“bmw”}]}，
“b”：{“项目”：[{“名称”：“凉鞋”}，{“名称”：“红鞋”}]}，
“c”：{“项目”：[{“名称”：“小说”}，{“名称”：“漫画”}]}，
“d”：{“items”：[{“name”：“rice”}，{“name”：“mie”}]}
}
选择1
汽车
鞋
书
食物
选择2
{{{#项目}
{{name}}
{{/items}
否，我想选择2有2个选项：-小说-漫画不仅仅是1个选项小说，漫画。检查我在答案中链接的链接下拉页面。您将需要使用该页面上所述的amp mustache和amp list，以便它实际循环遍历JSON数组值，而不是将它们打印为一个字符串。
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

<amp-state id="jsonData">
<script type="application/json">
  {
    "key": "a",
    "a": {"items": [{"name": "mercedes"},{"name": "bmw"}]},
    "b": {"items": [{"name": "sandal"},{"name": "red shoes"}]},
    "c": {"items": [{"name": "novel"},{"name": "comic"}]},
    "d": {"items": [{"name": "rice"},{"name": "mie"}]}
  }
  </script>
</amp-state>

<form method="GET" class="p2" action="/" target="_top">
  <div class="ampstart-input form-elem">
    <label for="sel1" class="form-label">Select1</label>
    <select name="sel1" id="sel1" on="change:AMP.setState({jsonData: {key : event.value}})">
      <option value="a">car</option>
      <option value="b">shoes</option>
      <option value="c">book</option>
      <option value="d">food</option>
    </select>
  </div>
  <div class="ampstart-input form-elem">
    <amp-list [src]="jsonData[jsonData.key]" items="." layout="fixed-height" width="auto" height="25">
      <template type="amp-mustache">
        <label for="sel2" class="form-label">Select2</label>
        <select name="sel2" id="sel2">
          {{#items}}
            <option>{{name}}</option>
          {{/items}}
        </select>
      </template>
    </amp-list>
  </div>
</form>