联动下拉列表

简介

这些联动下拉列表是使用 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` 实现