Add support for change events on <select> elements

examples/bind/forms.amp.html

@@ -20,6 +20,7 @@
   <button on="tap:AMP.setState({selected: 4})">4</button>
 
   <p [text]="'$' + selectedRange">$0</p>
+  <p>Color Selection: <span [text]="colorSelection || 'red'">red</span>
 
   <h4>Enter your name and email.</h4>
   <form method="post"
@@ -35,7 +36,16 @@ <h4>Enter your name and email.</h4>
             <input type="email" name="email" id="email1" required>
           </label>
           <label>
-            <span>Your Offer</span>
+            <span>Your choice</span>
+            <select on="change:AMP.setState({colorSelection: event.value})">
+              <option value="red">red</option>
+              <option value="green">green</option>
+              <option value="blue">blue</option>
+              <option value="yellow">yellow</option>
+            </select>
+          </label>
+          <label>
+            <span>Your offer</span>
             $100
             <input type="range" min="100" max="200" step="10" on="change:AMP.setState({selectedRange: event.value})"/>
             $200

src/service/action-impl.js

@@ -216,6 +216,9 @@ export class ActionService {
         });
         event.detail = detail;
       }
+    } else if (event.target.tagName.toLowerCase() === 'select') {
+      detail['value'] = target['value'];
+      event.detail = detail;
     }
   }
 

test/functional/test-action.js

@@ -990,4 +990,24 @@ describe('Core events', () => {
           return detail.min == 0 && detail.max == 10 && detail.value == 5;
         }));
   });
+
+  it('should trigger change event with details for select elements', () => {
+    const handler = window.document.addEventListener.getCall(2).args[1];
+    const element = document.createElement('select');
+    element.innerHTML =
+        `<option value="foo"></option>
+        <option value="bar"></option>
+        <option value="qux"></option>`;
+    element.selectedIndex = 2;
+    const event = {target: element};
+    handler(event);
+    expect(action.trigger).to.have.been.calledWith(
+        element,
+        'change',
+        sinon.match(object => {
+          const detail = object.detail;
+          return detail.value == 'qux';
+        }));
+  });
+
 });