How to set value dynamically in AMP forms

I want to set value of second select dropdown based on the first dropdown. Is there a way to set value of select in 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>

If I select some option in first dropdown and then I select second option. If I go back and set first dropdown to empty value that should make the second dropdown also empty.

You can achieve by using amp-bind, amp-list and amp-mustache

Here is working link

Add js code on head section

First we include amp-bind to track the page state and update the <amp-list> data source.

 <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

Next we include amp-list to request and display the dropdowns and their options.

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

Finally, we include amp-mustache to render the mustache templates inside the <amp-list>s.

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>

Add html code in body section

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

Note : create json according to drop down like https://jsonblob.com/api/527428a6-41f4-11e8-bbe4-1dfe6c86f2cb

For more information visit

UPDATED ANSWER

Visit the working URL

Updated HTML code

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