AMP
  • websites

Linked Dropdowns

Introduction

These linked dropdowns are implemented using AMP components. This pattern is useful when the values in the second dropdown depend on the value the user selects in the first dropdown. Here we select cities in a chosen country.

Setup

First we include amp-bind to track the page state and update the <amp-list> data source.

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

Next we include amp-list to request and display the dropdowns and their options.

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

Finally, we include amp-mustache to render the mustache templates inside the <amp-list>s.

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

Implementation

We use two <amp-list> elements to render the options within each <select>. The first dropdown triggers a request, which is batched with the request triggered by the other <amp-list> and the <amp-state> element, so only one request is sent.

When the user selects a value in the first dropdown, amp-bind updates the cities state value. This updates second <amp-list>'s [src] binding, and it renders its template using the data in the cities array.

<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>
Precisa de mais explicação?

If the explanations on this page don't cover all of your questions feel free to reach out to other AMP users to discuss your exact use case.

Ir para Stack Overflow
An unexplained feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Editar exemplos do GitHub