AMP Dropdown error: 'onchange' may not appear in tag 'select'

Question

我在 amp 页面上有一个 dropdown，当您单击 option 时，它会将您定向到一个新页面。 AMP 不允许使用 onchange 并抛出以下错误：The attribute 'onchange' may not appear in tag 'select'。我发现了一个类似的问题，但通过在页面或外部 js 文件上添加自定义脚本，接受的答案并不理想（并且不应该工作）。只要我能获得 AMP 验证成功标记，我愿意尝试不同的方法。谢谢！

<!doctype html>
<html ⚡ lang="en">
<head>
  <meta charset="utf-8" />
  <link rel="canonical" href="/article.html">
  <link rel="amphtml" href="/article.amp.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <link rel="shortcut icon" href="amp_favicon.png">
  <style amp-custom>
    body {
      width: auto;
      margin: 0;
      padding: 0;
    }
  </style>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp-boilerplate>
    body {
      -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      animation: -amp-start 8s steps(1, end) 0s 1 normal both
    }
    @-webkit-keyframes -amp-start {
      from {
        visibility: hidden
      }
      to {
        visibility: visible
      }
    }
    @-moz-keyframes -amp-start {
      from {
        visibility: hidden
      }
      to {
        visibility: visible
      }
    }
    @-ms-keyframes -amp-start {
      from {
        visibility: hidden
      }
      to {
        visibility: visible
      }
    }
    @-o-keyframes -amp-start {
      from {
        visibility: hidden
      }
      to {
        visibility: visible
      }
    }
    @keyframes -amp-start {
      from {
        visibility: hidden
      }
      to {
        visibility: visible
      }
    }
  </style>
  <noscript>
      <style amp-boilerplate>
        body{
          -webkit-animation:none;
          -moz-animation:none;
          -ms-animation:none;
          animation:none
        }
     </style>
    </noscript>
  </head>
  <body>
      <select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);" aria-labelledby="dropdownMenu1">         
        <option value="">Select an Option <i class="fa fa-caret-down"></i></option>
        <option value="/option1">Option 1</option>
        <option value="/option2">Option 2</option>
        <option value="/option3">Option 3</option>       
     </select>
  </body>
</html>

Answer 1

在您发表评论后，我进行了更多研究，发现了这一点：https://www.ampproject.org/docs/interaction_dynamic/amp-actions-and-events

看来您可以完全按照自己的意愿使用：

<select on="change:AMP.navigateTo(url=event.value)">
  <option value="http://google.com">google.com</option>
  <option value="http://yahoo.com">yahoo.com</option>
  <option value="http://bing.com">bing.com</option>
</select>

显然，适当地更新值！

如果您需要更多信息，相关功能请求位于此处：https://github.com/ampproject/amphtml/issues/8976 and linked examples are here: https://github.com/ampproject/amphtml/blob/master/examples/standard-actions.amp.html

AMP Dropdown error: 'onchange' may not appear in tag 'select'

AMP Dropdown error: 'onchange' may not appear in tag 'select'

html

javascript

.net-core

amp-html