title: Get selected value of datalist option value using javascript
body: <p>I need to add some values from a <code>HTML5</code> <code>DataList</code> to a <code>&lt;select multiple&gt;</code> control just with Javascript.  But I can't guess how to do it.</p>
  
  <p>This is what I have tried:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input id="SelectColor" type="text" list="AllColors"&gt;
  &lt;datalist id="AllColors"&gt;
    &lt;option label="Red" value="1"&gt;
    &lt;option label="Yellow" value="2"&gt;
    &lt;option label="Green" value="3"&gt;
    &lt;option label="Blue" value="4"&gt;
  &lt;/datalist&gt;
  
  &lt;button type="button" onclick="AddValue(document.getElementById('AllColors').value, document.getElementById('AllColors').text);"&gt;Add&lt;/button&gt;
  &lt;select id="Colors" size="3" multiple&gt;&lt;/select&gt;
  </code></pre>
  
  <pre><code>function AddValue(Value, Text){
  
  //Value and Text are empty!
  
  var option=document.createElement("option");
  option.value=Value;
  option.text=Text;
  
  document.getElementById('Colors').appendChild(option);
  
  }
  </code></pre>