通过Ajax请求重建选择选项来mobius1-selectr

Question

使用mobius1-selectr（https://github.com/Mobius1/Selectr）

嗨，如果我写正确的代码为做到这一点，我不知道。 我有3个选择需要由jquery根据另一个选择的结果填充。 我正在尝试对数据使用新功能，但元素不会重新加载新选项内容。

我有这样的元素：因为我不能没有任何选项来创建一个selectr需要

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

一个选项。

所以，首先我初始化元素是这样的：

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

一个我试图做到这一点，但选项赢得刷新：

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