title: Get Selected option attribute in React
body: <p>I want to get attribute from my select option list.</p>
  <p>In meanwhile my code is like below :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var Billing = React.createClass({
      getInitialState() {
      return {
          associations: [],
          value: '',
          associationsList: '1'
      };
    },
     handleChange(event) {  
      this.setState({value: event.target.value});
    },
    handleOption(event){
      var option =  event.target.getAttribute('data-id');
      this.setState({associationsList: option});
    },
    render() {
      var listAssociations = this.state.associations.map(function(index){
          return (
              &lt;option onChange={this.handleOption} value={index.name} data-id={index.id} ref={index.name} key={index.id}&gt;{index.name}&lt;/option&gt;
          )
      });
  
      var BillingInfo
      {
        if(this.state.associationsList == "0")
        {
          return (   
          &lt;div&gt;
          &lt;Tabs selected={0}&gt;
            &lt;Pane label="Billing Info"&gt;
              &lt;div className="row"&gt;
                  &lt;div className="small-12"&gt;
                      Associations:
                      &lt;select value={this.state.value} onChange={this.handleChange}&gt;
                      {listAssociations}
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div&gt;
              {this.state.value}&lt;br/&gt;
              {this.state.associationsList}
              Basic package
              &lt;/div&gt;
            &lt;/Pane&gt;
            &lt;Pane label="Billing History"&gt;
              &lt;div&gt;Billing history&lt;/div&gt;
            &lt;/Pane&gt;
          &lt;/Tabs&gt;
        &lt;/div&gt;
        );</code></pre>
  </div>
  </div>
  </p>
  <p>I have define option value with &quot;index.name&quot; i want to retrieve &quot;data-id&quot; to get different output. Can someone help me in this ?</p>
  <h1>EDITED</h1>
  <p>I have updated my code like below. But still i cannot get the data-id or is there any other method i can get my data id without set &quot;value&quot; with &quot;id&quot;.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>handleChange(event) {  
      var index = event.target.selectedIndex;
      var optionElement = event.target.childNodes[index]
      var option =  optionElement.getAttribute('data-id');
      this.setState({
      associationsList: option,
      value: event.target.value
      });
    },
     render() {
      var listAssociations = this.state.associations.map(function(index){
          return (
              &lt;option value={index.name} data-id={index.id} ref={index.name} key={index.id}&gt;{index.name}&lt;/option&gt;
          )
      });
  
      var BillingInfo
      {
        if(this.state.associationsList == "0")
        {
          return (   
          &lt;div&gt;
          &lt;Tabs selected={0}&gt;
            &lt;Pane label="Billing Info"&gt;
              &lt;div className="row"&gt;
                  &lt;div className="small-12"&gt;
                      Associations:
                      &lt;select value={this.state.value} onChange={this.handleChange}&gt;
                      {listAssociations}
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div&gt;
              {this.state.value}&lt;br/&gt;
              {this.state.associationsList}
              Basic package
              &lt;/div&gt;
            &lt;/Pane&gt;
            &lt;Pane label="Billing History"&gt;
              &lt;div&gt;Billing history&lt;/div&gt;
            &lt;/Pane&gt;
          &lt;/Tabs&gt;
        &lt;/div&gt;
        );
        }</code></pre>
  </div>
  </div>
  </p>