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

I have a dropdown on an amp page that when you click on the option, it would direct you to a new page. AMP doesn't allow to use onchangeand throw the following error: The attribute 'onchange' may not appear in tag 'select'. I found a similar question but the accepted answer is not ideal (and shouldn't work) by adding a customized script on the page or external js file. I'm open to trying different methods as long as I can earn the AMP validation successful stamp. Thanks!

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

Solution

After your comment, I researched a bit more and found this: https://www.ampproject.org/docs/interaction_dynamic/amp-actions-and-events

It looks like you can do exactly what you want by using:

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

Obviously, update the values appropriately!

If you want additional info, the relevant feature request was here: https://github.com/ampproject/amphtml/issues/8976 and linked examples are here: https://github.com/ampproject/amphtml/blob/master/examples/standard-actions.amp.html