title: Javascript: how to get selected option value that is in the datalist with inside select
body: <p>On this below code, Am trying to get the value of selected 'option' from 'select' element that is in the 'datalist' element. Have tried something, but, i couldn't. Am expecting solution only in javascript. As of now, it always alerts the first option value however we change the option value. It should alert actual option value when i change the option value on the input box. For example if i select 'Blueberry' then it should omit 'Bluberry'.</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;HTML 5 test Elements&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div&gt;
              &lt;label&gt;Your favorite fruit:
                  &lt;datalist id="fruit"&gt;
                      &lt;select name="fruits"&gt;
                          &lt;option value="Blackberry"&gt;Blacskberry&lt;/option&gt;
                          &lt;option value="Blackcurrant"&gt;Blackcurrant&lt;/option&gt;
                          &lt;option value="Blueberry"&gt;Blueberry&lt;/option&gt;
                      &lt;/select&gt;
                      If other, please specify:
                  &lt;/datalist&gt;
                  &lt;input type="text" name="fruit" list="fruit"/&gt;
              &lt;/label&gt;
  
              &lt;script type="text/javascript"&gt;
                  document.getElementsByName("fruit")[0].onchange = function (event) {
                      var evt = event || window.event;
                      var parElem = evt.srcElement || evt.target;
                      alert(document.getElementsByName("fruits")[0].options[document.getElementsByName("fruits")[0].selectedIndex].value);
                  }
              &lt;/script&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any idea? please.</p>