title: What is the proper way to get the value of a React <select> element?
body: <p>Say I have the following React element (<a href="https://jsfiddle.net/ypcrumble/ve88383c/3/" rel="nofollow noreferrer">example fiddle here</a>):</p>
  
  <pre><code>var Hello = React.createClass({
      getInitialState: function() {
          return {parsed: false};
      },
      _parseEvent: function(event) {
          var parser1 = event.currentTarget.selectedOptions[0].value;
          var parser2 = event.target.value;
          var parser3 = event.nativeEvent.srcElement.value;
          if (parser1 &amp;&amp; parser2 &amp;&amp; parser3)
              this.setState({parsed: true});
      },
      render: function() {
          var parsing = "parsing worked";
          return (
          &lt;div&gt;
          &lt;select            
              onChange={this._parseEvent}&gt;
              &lt;option value="----"&gt;----&lt;/option&gt;
              &lt;option value="Yes"&gt;Yes&lt;/option&gt;
              &lt;option value="No"&gt;No&lt;/option&gt;
          &lt;/select&gt;
          &lt;p&gt;
          { this.state.parsed ?
          {parsing}
          : null}
          &lt;/p&gt;
          &lt;/div&gt;
          );
      }
  });
  
  React.render(&lt;Hello name="World" /&gt;, document.getElementById('container'));
  </code></pre>
  
  <p>I'm using three ways of parsing the value of the <code>&lt;select&gt;</code> element. The first does not work on IE 10, and I know it's a bug per <a href="https://stackoverflow.com/q/30856606/2532070">my question here</a>. However, of the other two ways, <code>parser2</code> or <code>parser3</code>, which is the proper way to get the value of a <code>&lt;select&gt;</code> element in React? Why? Thanks for any help!</p>