title: Fill in a select box automatically with the value same as user input
body: <p>I'm trying to fill a select list with the values entered in an input text box when the user clicks on a button. For eg:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form&gt;
                  &lt;h2&gt;Add EVENT/MARKET/SELECTION ID &lt;/h2&gt;
                  &lt;select id="id_type"&gt;
                          &lt;option value="sEVENT"&gt;Event&lt;/option&gt;
                          &lt;option value="sEVMKT"&gt;Market&lt;/option&gt;
                          &lt;option value="sSELCN"&gt;Selection&lt;/option&gt;
                   &lt;/select&gt;
  
                  &lt;input id="entered_id" type="number"/&gt;
  
                &lt;button id="add_id" onclick="populateList()"&gt;Add&lt;/button&gt;
  &lt;/form&gt;
  &lt;form&gt;
                  &lt;h2&gt;Entered IDs&lt;/h2&gt;
                  &lt;select id="list_id" size="10" multiple="true"&gt;&lt;/select&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>function populateList() {
          var events_id   = document.getElementById('entered_id').value;  
  /*I want this events_id to be entered to the select list "list_id"*/
  }
  </code></pre>
  
  <p>I tried $("#list_id").append(events_id) but that didn't work.
  Any help is appreciated.
  Thanks</p>