0

here I have a dropdown tree made with select2 and jquery which is dynamically filled with an array for the example. I meet problems when I try to preselect an option by setting data in my select2 function, it doesn't work.

Below, you will have an attempt of what I'm trying to do.

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 Enfant'},{"id":13656,"reference":'PROD_ENFANT_03',"name":'Soins Enfant'},]},{"reference":'BC-FEMME',"name":'Pour les Femmes',"description":'Prestations pour les femmes',"id":154,"productList":[{"id":13657,"reference":'PROD_ENFANT_01',"name":'Brushing Femme'},{"id":13658,"reference":'PROD_ENFANT_03',"name":'Soins Femme'}]}]

let results = data.map(group => ({
  text: group.name,
  children: group.productList.map(product => ({
    id: product.id,
    text: product.name
  }))
}));    

var benefList = $('#benefitList');
benefList.select2({
         multiple: false,
         placeholder: 'Search for a benefit...',
         data: results
});

var productSelected = {
  id:13657,
  text:'Brushing Femme'
};
benefList.select2('data',productSelected);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<div class="form-group">
        <label class="form-label" for="prestationCombo">Benefits</label>
        <div class="input-group">
           <select id="benefitList"></select>
        </div>
    </div>
harili
  • 151
  • 2
  • 16

0 Answers0