0

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 of city 中创建一个新元素，然后在下一个 amp-list 中使用该元素。

我无法从代码和描述中得知如何重复此操作，以便在选择第二个元素时允许进一步选择（进行子选择）。

元素：

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

有效，但没有解释正在发生的事情以及如何使用它来获取第二个结果并提取更多选项。

任何人对如何使它起作用有任何想法或例子吗？

4

1 回答 1

0

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

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

为方便起见，让我们像这样修改当前数据集。一旦我们有了新的数据集，我们就可以创建正确的标记以按顺序显示三个下拉列表（Codepen 上的示例）。

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

于 2018-02-25T03:28:15.187 回答