尝试在表单中创建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"]}

当前的放大器列表渲染位于关键字文本输入框

之下

我已阅读文档，但我无法弄清楚，请帮忙。我希望将所有地点都放在单一的“选择地点”中。下拉

Answer 1

您必须将<select>移到放大器列表之外：

  <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>