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>