如何使用 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 显示 grouped options 所需的格式。试试这个：

$('#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...',
});

作为参考，分组的数据结构输出如下所示：

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

如何使用 jquery 使用 select2 创建下拉树？

How can I make a dropdown tree with select2 using jquery?

javascript

jquery

jquery-select2