amp-html - 尝试在表单中创建 AMP 列表，但无法正确呈现

Question

我正在尝试使用 amp-list 在表单中设置位置过滤器，我正在尝试按以下方式进行操作：

 <amp-list width="auto"
                height="35"
                layout="fixed-height"
                src="<?php echo plugins_url
                        ( 'assets/json/locations.json', __FILE__ ) ?>">
            <template type="amp-mustache">
                <select id="locations"
                    name="location"
                    on="change:
                    AMP.setState({
                    locations: dropdown.items.filter(x => x == event.value)
                    })"
                >
                    <option value="">Choose a location</option>
                    {{#items}}
                    <option value="{{.}}">{{.}}</option>
                    {{/items}}
                </select>
            </template>
            </amp-list>

我的json文件是这样的：

{"items":["Bangalore","Indore","Long Island","Lucknow","New Delhi","New Jersey"]}

当前的 amp-list 渲染在关键字文本输入框下方

我已经阅读了文档，但我无法弄清楚，请帮助。我想让所有位置都在单个“选择位置”下拉列表中

Answer 1

<select>您必须将amp-list移到外部：

  <select id="locations" name="location" on="change:
                    AMP.setState({
                    locations: dropdown.items.filter(x => x == event.value)
                    })">
    <option value="">Choose a location</option>
    <amp-list width="auto" height="35" layout="fixed-height" src="<?php echo plugins_url
                        ( 'assets/json/locations.json', __FILE__ ) ?>">
      <template type="amp-mustache">


        <option value="{{.}}">{{.}}</option>

      </template>
    </amp-list>
  </select>