HTMLのヘッダの選択

Question

私はスクリプトで動的選択を作成しています。

$.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); 
          }); 

これはうまくいきます。 Selectは、CustomerId + PurchaseDate + SupplyDate + SupplierNameのドロップダウンにテキストを表示します

ただし、このために選択するヘッダーを追加します。

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

私は本当にこれのためのオートコンプリートとタイプオーバーヘッドのプラグインをスキップしたいと思います。選択にヘッダを追加する必要があります。

Answer 1

あなたはそれがテーブル構造に似たものになりますように、これはあるよう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>