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 autoplete and typeahead plugin for this. Need to add header in select.

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 autoplete and typeahead plugin for this. Need to add header in select.

• javascript
• jquery
• html

Share Improve this question Follow asked Jan 19, 2017 at 5:45 Johny BravoJohny Bravo 42411 gold badge1010 silver badges3535 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You can add header to select element using optgroup

You can check demo jsfiddle/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>