title: Header for HTML Select
body: <p>I am creating dynamic select in script.</p>
  
  <pre><code> $.each(data, function (i) {
  
                                  optionhtml = '&lt;option value="' 
                              data[i].CustomerId + '"&gt;' + data[i].CustomerId + ' _  ' + data[i].PurchaseDate + ' _  ' + data[i].SupplyDate + ' _  ' + data[i].SupplierName + '&lt;/option&gt;';
                                  $("select[id='ddlAdm" + arrElem[0]']").append(optionhtml);
                              });
  </code></pre>
  
  <p>This works well. Select displays text in dropdown for CustomerId+PurchaseDate+SupplyDate+SupplierName</p>
  
  <p>However I want to add header in select for this. </p>
  
  <pre><code>CustomerId PurchaseDate SupplyDate SupplierName
  123         10/11/2016   10/15/2018  XYZ
  123         10/16/2018   10/23/2018  PQR
  </code></pre>
  
  <p>I really want to skip autocomplete and typeahead plugin for this. Need to add header in select.</p>