Question

我想根据第一个下拉列表设置第二个选择下拉列表的值。有没有办法在AMP中设置选择值。

<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>

如果我在第一个下拉列表中选择了某个选项，那么我选择第二个选项。如果我返回并将第一个下拉列表设置为空值，那么第二个下拉列表也会为空。

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表单中动态设置值

1 个答案: