如何在放大器网络中创建多个选择框，其中1个组合框根据另一个组合框值

Question

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

<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">
        <label for="sel2" class="form-label">Select2</label>
        <select name="sel2"
          id="sel2">
          <option [text]="jsonData[(jsonData.key)]">a example</option>
        </select>
      </div>
    <amp-state id="jsonData">
      <script type="application/json">
        {"key" : "",
         "a":["mercedes","bmw"],
         "b":["sandal","red shoes"],
         "c":["novel","comic"],
         "d":["rice","mie"]
       }
      </script>
    </amp-state>  
  </form> 

如何让组合框2包含多个从json获取的值...现在selectbox只包含1个选项selectbox加入数组..我想从json数组中获取多个选项... 例如： 如果组合框1选择书籍，那么组合框2将包含小说和漫画。

Answer 1

屏幕截图显示的是您预期的结果吗？如果是这样，您只是错过了它看起来的放大器形式脚本（如果放大器绑定脚本是您唯一正在运行的脚本）。

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

另请查看Linked Dropdowns上的AMP By Example页面。它可能对您尝试完成的任务有所帮助。

Answer 2

根据Craig的建议，您需要使用amp-list和amp-mustache来生成内容。

amp-list可以使用[src]绑定获取结果，并使用提供的template迭代每个结果。

很遗憾，我无法让amp-list仅呈现option标记。 有效的解决方法是生成select标记，如链接下拉列表示例中所示 为了做到这一点，你应该将你的项目包装在一个对象中，以便amp-list没有一个数组而只有一个对象，并且只渲染一次模板，但你可以迭代你的结果。{{1} }。

你可以这样做：

mustache