如何使用 jquery 使用 select2 制作下拉樹？

Question

我一直在嘗試用我的 json 創建一個下拉樹。 它代表具有產品列表的兩個類別。

這是我的 JSON 數組：

    [
    {
    "reference":'BC-ENFANT',
    "name":'Pour les Enfants',
    "description":'Soins pour les enfants...',
    "id":155,
    "productList":[
    {"id":13655,"reference":'PROD_ENFANT_01',"name":'Brushing'},
    {"id":13656,"reference":'PROD_ENFANT_03',"name":'Soins'},
    ]
    },
    
    {
    "reference":'BC-FEMME',
    "name":'Pour les Femmes',
    "description":'Prestations pour les femmes',"id":154,
    "productList":[
    {"id":13657,"reference":'PROD_ENFANT_01',"name":'Brushing'},
    {"id":13658,"reference":'PROD_ENFANT_03',"name":'Soins'},
    ]}]

我只能用這些行填充一個簡單的 select2（使用 Ajax 調用）：

    <div class="form-group">
        <label class="form-label" for="prestationCombo">Prestation</label>
        <div class="input-group">
           <select type="text" id="benefitList" class="form-control"></select>
        </div>
    </div>

        $.post("BookingManager/CategoryResult",
                                {
                                    shopId: shopId
                                },
                                function (data) {
                                    console.log(data);
                                    $('#benefitList').select2({
                                        multiple: false,
                                        data: data.map(c => { return c.reference }),
                                        dropdownParent: $('#emptyEvent'),
                                        placeholder: 'Rechercher une prestation...',
                                    });
                                }
    );

我已經使用過 select2 但從未找到解決此問題的正確方法。

Answer 1

AJAX 調用的響應格式對於 Select2 中的分組數據的結構不正確。

這可以通過使用 Select2 庫的ajax屬性和processResult來解決。 后者將接受 AJAX 響應，並可用於將數據轉換為 Select2 所需的格式，以便顯示分組選項。 嘗試這個：

$('#benefitList').select2({
  multiple: false,
  ajax: {
    url: 'BookingManager/CategoryResult',
    type: 'POST',
    data: params => {
      term: params.term, // include the search term in the request
      shopId: shopId
    },
    processResults: data => {
     let results = data.map(group => ({
        text: group.name,
        children: group.productList.map(product => ({
          id: product.id,
          text: product.name
        }))
      }));
    
      return { results };
    }    
  }
  dropdownParent: $('#emptyEvent'),
  placeholder: 'Rechercher une prestation...',
});

作為參考，這是分組數據結構 output 的樣子：

 let data = [{"reference":'BC-ENFANT',"name":'Pour les Enfants',"description":'Soins pour les enfants...',"id":155,"productList":[{"id":13655,"reference":'PROD_ENFANT_01',"name":'Brushing'},{"id":13656,"reference":'PROD_ENFANT_03',"name":'Soins'},]},{"reference":'BC-FEMME',"name":'Pour les Femmes',"description":'Prestations pour les femmes',"id":154,"productList":[{"id":13657,"reference":'PROD_ENFANT_01',"name":'Brushing'},{"id":13658,"reference":'PROD_ENFANT_03',"name":'Soins'}]}] let results = data.map(group => ({ text: group.name, children: group.productList.map(product => ({ id: product.id, text: product.name })) })); console.log({ results });