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