0

我想根据第一个下拉列表设置第二个选择下拉列表的值。有没有办法在 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>

如果我在第一个下拉列表中选择某个选项，然后选择第二个选项。如果我返回并将第一个下拉列表设置为空值，则应该使第二个下拉列表也为空。

4

1 回答 1

1

您可以通过使用amp-bind、amp-list和amp-mustache来实现

这是工作链接

在head部分添加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>s 中渲染小胡子模板。

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

注意：根据下拉菜单创建 json，如https://jsonblob.com/api/527428a6-41f4-11e8-bbe4-1dfe6c86f2cb

欲了解更多信息，请访问

更新的答案

访问工作 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>
于 2018-04-17T04:25:38.047 回答