Amp html 选择amp上事件后的选项元素_Amp Html

Amp html 选择amp上事件后的选项元素

amp-html

Amp html 选择amp上事件后的选项元素,amp-html,Amp Html,我想在用户更改第一个下拉列表后，自动选择第二个和第三个下拉列表中的一个选项你好，TML世界！颜色蓝色红色绿色大小小的中等的大的布料纸张塑料木材您可以通过使用amp bind来实现这一点。当您在第一个下拉列表中选择一个选项时，请使用所需值设置一个状态。为了演示，我创建了一个状态，用于存储映射，以确定与选择相对应的要设置的值，如下所示： <amp-state id="mapping"> <script type="application/jso

我想在用户更改第一个下拉列表后，自动选择第二个和第三个下拉列表中的一个选项

你好，TML世界！颜色蓝色红色绿色大小小的中等的大的布料纸张塑料木材

您可以通过使用amp bind来实现这一点。当您在第一个下拉列表中选择一个选项时，请使用所需值设置一个状态。为了演示，我创建了一个状态，用于存储映射，以确定与选择相对应的要设置的值，如下所示：

  <amp-state id="mapping">
  <script type="application/json">
   {
      "blue" : "small",
      "red" : "medium",
      "green" : "big"
   }
  </script>
  </amp-state>

<select name="color" id="color" on="change:AMP.setState({ val : mapping[event.value] })">

  <select name="size" id="size">
    <option disabled selected></option>
    <option value="small" [selected]=" val == 'small' ">small</option>
    <option value="medium" [selected]=" val == 'medium' ">medium</option>
    <option value="big" [selected]=" val == 'big' ">big</option>
  </select>

注意：不要忘记添加amp绑定脚本

  <amp-state id="mapping">
  <script type="application/json">
   {
      "blue" : "small",
      "red" : "medium",
      "green" : "big"
   }
  </script>
  </amp-state>

<select name="color" id="color" on="change:AMP.setState({ val : mapping[event.value] })">

  <select name="size" id="size">
    <option disabled selected></option>
    <option value="small" [selected]=" val == 'small' ">small</option>
    <option value="medium" [selected]=" val == 'medium' ">medium</option>
    <option value="big" [selected]=" val == 'big' ">big</option>
  </select>

注意：不要忘记添加amp绑定脚本

没有选择选项值的操作和事件，您可以使用amp bind进行选择

body{-webkit动画：-amp start 8s steps1，end 0s 1 normal tweet；-moz动画：-amp start 8s steps1，end 0s 1 normal tweet；-ms动画：-amp start 8s steps1，end 0s steps1，end 0s 1 normal tweet}@-webkit关键帧-amp start{从{可见性：隐藏}到{可见性：可见}}@-moz关键帧-amp start{from{可见性：隐藏} 颜色蓝色红色绿色大小小的中等的大的布料纸张塑料木材

没有选择选项值的操作和事件，您可以使用amp bind进行选择