Question

在AMP By Example网站上有一个很好的示例https://ampbyexample.com/advanced/linked_dropdowns/，但这很有效但是我试图理解如何使这更加通用并且有两个以上的下降并且发现它很难找到操作AMP.setState的正确语法。

在示例中

＆＃13;

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

＆＃13;

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

我无法从代码和说明中判断如何重复这一点，以便在选择第二个元素时允许进一步选择（进行子选择）。

元素：

＆＃13;

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

＆＃13;

和

＆＃13;

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

＆＃13;

有效，但无法解释发生了什么以及如何使用它来获取第二个结果并提取更多选项。

任何人都有关于如何使其发挥作用的任何想法或示例？

Answer 1

首先，我假设当你说＆＃34;取第二个结果并提取更多选项＆＃34;您打算添加额外的select选项进行过滤（例如某个城市的博物馆）。

为此，首先需要一个容纳附加信息的数据集。这可能是对当前数据集或全新数据集端点的修改。

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

注意：目前有一个错误在选择后立即重置城市选择。我的猜测是有一些东西触发了国家选择的变更事件（重置城市选择），但没有机会深入研究这个问题（帮助欢迎）。

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

1 个答案: