Trying to re-create select with ajax results.

[rodrigosaraiva]

Hi, I don know if I am writing the right code for do this.
I have 3 selects that needs to be filled by jquery based on a result from another select.
I am trying to use the new function with data, but the element don't reload new options content.

I have this element:

<select id="dimensions_ids" multiple class="form-control hidden-input" name="dimensions_ids[]" tabindex="-1" aria-hidden="true" disabled=""><option value="0"></option></select>

One option is needed because I can't create a selectr without nay option.

So, first I am initializing the element like this:

    let selectDimensionsIds = new Selectr('#dimensions_ids', {
        clearable: true
    });
    selectDimensionsIds.disable();

An I am trying to do this, but the options won refresh:

    function populateDimensions(areasId) {
        let values = {
            'areas': areasId
        };
        $.ajax({
            url: '/getdimensionsbyareas',
            type: 'GET',
            data: values,
            dataType: 'json',
            success: function(result) {
                let dimensions = JSON.stringify(result);
                selectDimensionsIds.destroy();
               selectDimensionsIds = new Selectr('#dimensions_ids', {
                    dimensions,
                    clearable: true,
                    multiple: true
                });
                selectDimensionsIds.enable();
            },
        });
    }

If someone could help me. I appreciate. Thanks

[rodrigosaraiva]

I did this to solve my problem:

  function populateDimensions(areasId) {
        let values = {
            'areas': areasId
        };
        $.ajax({
            url: '/getdimensionsbyareas',
            type: 'GET',
            data: values,
            dataType: 'json',
            success: function(result) {
                let selectHtml = '';
                if (result.data.length > 0) {
                    $.each(result.data, function (index, value) {
                        selectHtml += '<optgroup label="' + value.text + '">';
                        $.each(value.children, function (index, value) {
                            selectHtml += '<option value="' + value.value + '">' + value.text + '</option>';
                        });
                    });
                    selectDimensionsIds.destroy();
                    $('#dimensions_ids').empty();
                    $('#dimensions_ids').append(selectHtml);
                    selectDimensionsIds.render({
                        clearable: true,
                        multiple: true
                    });
                    selectDimensionsIds.enable();
                } else {
                    selectDimensionsIds.destroy();
                    $('#dimensions_ids').empty();
                    $('#dimensions_ids').append('<option>Selecione uma ou mais áreas</option>');
                    selectDimensionsIds.render({
                        clearable: true,
                        multiple: true
                    });
                    selectDimensionsIds.disable();
                }
            },
        });
    }

[Mobius1]

Similar to #17, this will be fixed in an upcoming update 👍