如何在 AMP 表单中动态设置值

Question

我想根据第一个下拉菜单设置第二个 select 下拉菜单的值。有没有办法在 AMP 中设置 select 的值。

<select name="cars" on="change:
            AMP.setState({
                 bikes:'bike2'       
    }) id="card">
  <option value="">Select cars</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
<select name="bikes" id="bikes">
  <option value="">Select bikes</option>
  <option value="bike1">bike1</option>
  <option value="bike2">bike2</option>
  <option value="bike3">bike3</option>
  <option value="bike4">bike4</option>
</select>

如果我 select 第一个下拉列表中的某个选项，然后我 select 第二个选项。如果我返回并将第一个下拉菜单设置为空值，那么应该使第二个下拉菜单也为空。

Answer 1

您可以使用 amp-bind、amp-list 和 amp-mustache

Here is working link

头部添加js代码

首先我们包含 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> 中呈现小胡子模板。

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

在正文部分添加html代码

 <amp-list height="25" layout="fixed-height" src="https://jsonblob.com/api/527428a6-41f4-11e8-bbe4-1dfe6c86f2cb">
    <template type="amp-mustache">
         <select id="car" on="
        change:
          AMP.setState({
            bikes: dropdown.items[0].cars.filter(x => x.name == event.value)[0]
          })"
      >
        <option value="">Select cars</option>
        {{#cars}}
          <option value="{{name}}">{{name}}</option>
        {{/cars}}
      </select>
    </template>
</amp-list>
<amp-list height="25" layout="fixed-height" [src]="bikes || 'https://jsonblob.com/api/527428a6-41f4-11e8-bbe4-1dfe6c86f2cb'" src="https://jsonblob.com/api/527428a6-41f4-11e8-bbe4-1dfe6c86f2cb">
    <template type="amp-mustache">
       <select [disabled]="!bikes" disabled id="bike">
        {{^bikes}}<option value=""></option>{{/bikes}}
        {{#bikes.0}}<option value="">Select bikes</option>{{/bikes.0}}
        {{#bikes}}<option value="{{.}}">{{.}}</option>{{/bikes}}
      </select>
    </template>
</amp-list>
<amp-state id="dropdown" src="https://jsonblob.com/api/527428a6-41f4-11e8-bbe4-1dfe6c86f2cb"></amp-state>

注：根据https://jsonblob.com/api/527428a6-41f4-11e8-bbe4-1dfe6c86f2cb

等下拉创建json

For more information visit

更新的答案

Visit the working URL

已更新 HTML 代码

<select on="change:AMP.setState({ option: event.value })" class="m1">
  <option value="0">Select cars</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<select name="bikes" id="bikes">
    <option [selected]="option == 0" value="">Select bikes</option>
    <option hidden [hidden]="option == 0" value="bike1">bike1</option>
    <option hidden [hidden]="option == 0" value="bike2">bike2</option>
    <option hidden [hidden]="option == 0" value="bike3">bike3</option>
    <option hidden [hidden]="option == 0" value="bike4">bike4</option>
</select>

<input [checked]="option != 0" type="radio" />
<span>Select Radio</span>

如何在 AMP 表单中动态设置值

How to set value dynamically in AMP forms

html

amp-html

amp-bind