AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt
  • 網站

聯動式下拉選單

檢視示範 在 Playground 中開啟

簡介

這些聯動式下拉選單是使用 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 網址，如 amp-form 元件的 action 欄位中所述。為了執行此操作，我們必須在每個 select 陳述式中加入 data-allow-initialization 和 name="query parameter" (在此範例中為 Google 搜尋的 q) 欄位。如需更多詳細資訊，請參閱 amp-form。

若要在使用者選取值後重新導向使用者，您必須加入 [提交] 按鈕以關閉表單。使用者選取 [提交] 按鈕後，系統會將他們導向至附加查詢的 action 網址。

 
<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 上編輯範例