联动下拉列表

简介

这些联动下拉列表是使用 AMP 组件实现的。当第二个下拉列表中的值取决于用户在第一个下拉列表中选择的值时，此模式非常有用。这里我们选择所选国家/地区的城市。

设置

首先，我们包含 amp-bind 来跟踪页面状态并更新 <amp-list> 数据源。

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

接下来，我们包含 amp-list 来请求和显示下拉列表及其选项。

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

最后，我们包含 amp-mustache 以在 <amp-list> 中渲染 Mustache 模板。

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

对于最后一段代码，我们展示如何使用 get 方法通过 amp-form 实现联动列表

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

实现

我们使用两个 <amp-list> 元素来渲染每个 <select> 中的选项。第一个下拉列表触发一个请求，该请求与另一个 <amp-list> 和 <amp-state> 元素触发的请求进行批处理，因此只发送一个请求。

当用户在第一个下拉列表中选择一个值时，amp-bind 会更新 cities 状态值。这将更新第二个 <amp-list> 的 [src] 绑定，并使用 cities 数组中的数据渲染其模板。

<div class="linked-dropdown">
  <amp-list layout="fixed-height" height="25" src="/static/samples/json/linked_dropdowns.json" binding="refresh" single-item items="." noloading>
    <template type="amp-mustache">
      <label for="country">Country:</label>
      <select id="country" on="change: AMP.setState({
                                          cities: dropdown.countries.filter(x => x.name == event.value)[0]
                                        })">
        <option value>Choose a country</option>
        {{#countries}}
          <option value="{{name}}">{{name}}</option>
        {{/countries}}
      </select>
    </template>
    <div placeholder role="listitem">
      <label for="country">Country:</label>
      <select disabled>
        <option value>Choose a country</option>
      </select>
    </div>
  </amp-list>
  <amp-list layout="fixed-height" height="25" [src]="cities || '/static/samples/json/linked_dropdowns.json'" src="/static/samples/json/linked_dropdowns.json" binding="refresh" single-item items="." noloading>
    <template type="amp-mustache">
      <label for="city">City:</label>
      <select [disabled]="!cities" disabled id="city">
        <option value>Choose a city</option>
        {{#cities}}
          <option value="{{.}}">{{.}}</option>
        {{/cities}}
      </select>
    </template>
    <div placeholder role="listitem">
      <label>City:</label>
      <select disabled>
        <option value>Choose a city</option>
      </select>
    </div>
  </amp-list>
  <amp-state id="dropdown" src="/static/samples/json/linked_dropdowns.json"></amp-state>
</div>

使用 `get` 方法的 `amp-form` 实现

这里我们展示了 amp-form 元素内的相同示例。

我们想将选定的值传递到 action URL 中，如 amp-form 组件中的 action 字段中所找到的那样。为了做到这一点，我们必须在每个 select 语句中包含 data-allow-initialization 和 name="query parameter"（在本例中为 Google 搜索的 q）字段。有关更多详细信息，请参阅 amp-form。

要在用户选择值后重定向用户，您必须包含一个 Submit 按钮来关闭表单。一旦用户选择 Submit 按钮，他们将被定向到带有附加查询的 action url。

<div class="linked-dropdown-form">
  <form data-initialize-from-url id="formResetSample" class="field" action="https://www.google.com" method="get" target="_top">
    <amp-list layout="fixed-height" height="25" src="/static/samples/json/linked_dropdowns.json" binding="refresh" single-item items="." noloading>
      <template type="amp-mustache">
        <label for="country">Country:</label>
        <select id="country" on="change: AMP.setState({
                                        citiesForm: dropdown.countries.filter(x => x.name == event.value)[0]
                                      })" name="q" data-allow-initialization>
          <option value>Choose a country</option>
          {{#countries}}
            <option value="{{name}}">{{name}}</option>
          {{/countries}}
        </select>
      </template>
      <div placeholder role="listitem">
        <label for="country">Country:</label>
        <select disabled>
          <option value>Choose a country</option>
        </select>
      </div>
    </amp-list>
    <amp-list layout="fixed-height" height="25" [src]="citiesForm || '/static/samples/json/linked_dropdowns.json'" src="/static/samples/json/linked_dropdowns.json" binding="refresh" single-item items="." noloading>
      <template type="amp-mustache">
        <label for="city">City:</label>
        <select [disabled]="!citiesForm" disabled id="city" on="change: AMP.setState({city: event.value})" name="q" data-allow-initialization>
          <option value>Choose a city</option>
          {{#citiesForm}}
            <option value="{{.}}">{{.}}</option>
          {{/citiesForm}}
        </select>
      </template>
    </amp-list>
    <amp-state id="dropdown" src="/static/samples/json/linked_dropdowns.json"></amp-state>
    <button on="select:formResetSample.submit">
      Submit
    </button>
  </form>
</div>

需要进一步解释吗？

如果本页上的说明没有涵盖您所有的问题，请随时与其他 AMP 用户联系，讨论您的确切用例。

转到 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的长期参与者，但也欢迎您为自己特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例

由 @cvializ 撰写

联动下拉列表

简介

设置

实现

使用 get 方法的 amp-form 实现

使用 `get` 方法的 `amp-form` 实现