联动下拉菜单

简介

这些联动下拉菜单是使用 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="查询参数"（在本例中为 Google 搜索的 q）字段。有关更多详细信息，请参阅amp-form。

要在用户选择值后重定向用户，您必须包含一个“提交”按钮来关闭表单。一旦用户选择“提交”按钮，他们将被定向到带有附加查询的 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` 实现