Header for HTML Select

Question

I am creating dynamic select in script.

 $.each(data, function (i) {

                                optionhtml = '<option value="' 
                            data[i].CustomerId + '">' + data[i].CustomerId + ' _  ' + data[i].PurchaseDate + ' _  ' + data[i].SupplyDate + ' _  ' + data[i].SupplierName + '</option>';
                                $("select[id='ddlAdm" + arrElem[0]']").append(optionhtml);
                            });

This works well. Select displays text in dropdown for CustomerId+PurchaseDate+SupplyDate+SupplierName

However I want to add header in select for this.

CustomerId PurchaseDate SupplyDate SupplierName
123         10/11/2016   10/15/2018  XYZ
123         10/16/2018   10/23/2018  PQR

I really want to skip autocomplete and typeahead plugin for this. Need to add header in select.

Answer 1

You can add header to select element using optgroup

You can check demo jsfiddle.net/bharatsing/bgd9bobo/

<select>
    <optgroup label = "CustomerId PurchaseDate SupplyDate SupplierName">
    <option value ="123         10/11/2016   10/15/2018  XYZ">123         10/11/2016   10/15/2018  XYZ</option>    
    <option value ="123         10/16/2018   10/23/2018  PQR">123         10/16/2018   10/23/2018  PQR</option>   
    </optgroup>
</select>