Problem with multiple select while selecting values with setVal

Select pickers & dropdowns
1

Hello! I am making an app where I use the mobiscroll multiple select to select different values in a dropdown list. I need to keep some values selected so I use the .setVal to select them, but I am not able to keep the values selected. I get the select options from a database like that:

            $.each(oListaMedidas, function (i, medida) {
                opciones_m += '<option value="' + medida.ID + '">' + medida.MEDIDA + '</option>';**
            });
            $('#txtMedidas).html(opciones_m);

I have this html:

<div class="form-group">
    <label>Medidas:</label>
    <label>
        <input mbsc-input id="campo_medidas" placeholder="Por favor, selecciona las medidas..." data-dropdown="true" data-input-style="outline" data-label-style="stacked" data-tags="true" />
        </label>
   <select id="txtMedidas" multiple></select>
</div>

And this mobiscroll configuration:

mobiscroll.setOptions({
            locale: mobiscroll.localeEs,
            theme: 'ios',
            sort: true,
            themeVariant: 'light'
        });

And I am trying to put the selected values like this:

var instance = mobiscroll.select('#txtMedidas', {
  inputElement: document.getElementById('campo_medidas')
});

I get the selected values (the IDs) in the idMedidas array, so I try to select them like that:

instance.setVal(idMedidas);

I can get the values selected if I change the option values to the medida.MEDIDA item, but it will be very slow for the system and I would have to change all the code. Could you please help me to solve that? Thanks!!

2

Hi @ggilbordon,

Currently a solution for forcing a selection to stay selected would be to check the currently selected value inside the onChange event and if you would like it to remain selected, add it to the selected values and call the setVal with the updated array.