如何根据下拉列表中的响应操作AMP状态

Question

在AMP By example网站上有一个很好的示例https://ampbyexample.com/advanced/linked_dropdowns/，它工作得很好，但是我正在尝试理解如何让它更通用，有两个以上的下拉列表，我发现很难找到正确的语法来操作AMP.setState。

在示例中

​

<amp-list width="auto"
    height="25"
    layout="fixed-height"
    src="https://ampbyexample.com/json/linked_dropdowns.json">
    <template type="amp-mustache">
      <label for="country">Country:</label>
      <select id="country"
        on="
      change:
        AMP.setState({
          cities: dropdown.items[0].countries.filter(x => x.name == event.value)[0]
        })">
        <option value="">Choose a country</option>
        {{#countries}}
        <option value="{{name}}">{{name}}</option>
        {{/countries}}
      </select>
    </template>
  </amp-list>
  <amp-list width="auto"
    height="25"
    layout="fixed-height"
    [src]="cities || 'https://ampbyexample.com/json/linked_dropdowns.json'"
    src="https://ampbyexample.com/json/linked_dropdowns.json">
    <template type="amp-mustache">
      <label for="city">City:</label>
      <select [disabled]="!cities"
        disabled
        id="city">
        {{^cities}}
        <option value=""></option>{{/cities}} {{#cities.0}}
        <option value="">Choose a city</option>{{/cities.0}} {{#cities}}
        <option value="{{.}}">{{.}}</option>{{/cities}}
      </select>
    </template>
  </amp-list>
  <amp-state id="dropdown"
    src="https://ampbyexample.com/json/linked_dropdowns.json"></amp-state>

​

它获取下拉列表的结果，并使用它在城市的setState中创建一个新元素，然后在下一个amp列表中使用该元素。

我不能从代码和描述中看出如何重复这一点，以便当选择第二个元素时，允许进一步选择(子选择)。

元素：

​

on="change:AMP.setState({cities: dropdown.items[0].countries.filter(x => x.name == event.value)[0]})"

​

和

​

<amp-list width="auto"
    height="25"
    layout="fixed-height"
    [src]="cities || 'https://ampbyexample.com/json/linked_dropdowns.json'"
    src="https://ampbyexample.com/json/linked_dropdowns.json">

​

有效，但没有解释发生了什么，以及如何使用它来获取第二个结果并提取进一步的选项。

有没有人有任何关于如何工作的想法或例子？

Answer 1

首先，我假设当您说“获取第二个结果并提取更多选项”时，您打算添加一个额外的select选项来过滤(例如，一个城市内的博物馆)。

为了做到这一点，首先你需要一个包含额外信息的数据集。这可以是对当前数据集的修改，也可以是一个全新的数据集端点。

为了方便起见，让我们修改当前的一组数据like so。一旦我们有了新的数据集，我们就可以创建正确的标记来显示序列中的三个下拉列表(example on Codepen)。

注意:当前存在一个bug，会在选择城市后立即重置城市选择。我的猜测是有什么东西触发了country select (重置城市选择)的更改事件，但没有机会深入研究这个问题(帮助欢迎)。