通过ajax请求将select选项重建为mobius1-selectr

Question

使用mobius1-selectr (https://github.com/Mobius1/Selectr)

嗨，我不知道我是不是在为这个写正确的代码。我有3个需要jquery根据另一个select的结果填充的选择。我试图在数据中使用新函数，但是元素不会重新加载新的选项内容。

我有这样的元素：

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

一个选项是必需的，因为我不能创建没有任何选项的selectr。

所以，首先我要初始化元素如下：

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

A我正在尝试这样做，但这些选项获得了刷新：

 `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();             },         });     }` 

如果有人能帮我。我很感激。谢谢

Answer 1

所以，我做了这个，解决了我的问题。

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