Как добавить данные к нескольким элементам в функции успеха ajax? - PullRequest
Новая
       16

Как добавить данные к нескольким элементам в функции успеха ajax?

0 голосов
/ 07 июня 2019

Я пытаюсь добавить данные, полученные из одного из моих PHP-скриптов, в два поля выбора в моей форме. Тем не менее, только один ящик получает данные, а другой становится пустым. Данные, полученные из скрипта, представляют собой массив из двух элементов. Оба из которых являются строками. 

["<option disabled selected>-- Please Select A Employee\/Subcontractor<\/option>",
"<option disabled selected>-- Please Select A Employee\/Subcontractor<\/option>"]

Я попытался закомментировать первый оператор добавления (и оба пустых оператора), чтобы увидеть, будет ли второй выполняться, и он это сделает.

Javascript: 

$(document).ready(function() {
         $('.mdb-select').material_select();
         $('#dep').on('change',function(){
              var department = $(this).val();

              $.ajax({
                url: '../fetch/ft-emp-w-department.php',
                type: 'POST',
                data: {department: department},
                dataType: 'json',
                success: function(data){
                  $('#emp').empty();
                  $('#sub').empty();
                  $('#emp').append(data[0]);
                  $('#sub').append(data[1]);
                }

              });
});

HTML: 

              <label class="col-sm-2 col-form-label">Employee(s) <b style="color:red;">*</b></label>
              <div class="col-sm-4">
                <select name="emp[]" class="mdb-select" id="emp" >
                  <option disabled selected>--Choose Employee(s)</option>
                </select><br>
              </div><div class="col-sm-6"></div>

              <label class="col-sm-2 col-form-label">Subcontractor(s) <b style="color:red;">*</b></label>
              <div class="col-sm-4">
                <select name="sub[]" class="mdb-select" id="sub" >
                  <option disabled selected>--Choose Subcontractor(s)</option>
                </select><br>
              </div><div class="col-sm-6"></div>

В консоли не получено ошибок. Ожидаемый вывод должен иметь «options» ids: sub, emp для отображения текста, отправленного им из функции успеха ajax.

РЕДАКТИРОВАТЬ: Все, что связано с $('#sub') не работает, если $('#emp') не указано.

1 Ответ

0 голосов
/ 07 июня 2019

Проблема заключалась в несовместимости с дизайном материала для начальной загрузки.Это требует от вас инициализации / уничтожения блоков выбора. 

$(document).ready(function() {
            $('.mdb-select').material_select();

            $('#dep').on('change',function(){
              var department = $(this).val();

              $.ajax({
                url: '../fetch/ft-emp-w-department.php',
                type: 'POST',
                data: {department: department},
                dataType: 'json',
                success: function(data){
                  $('#emp').material_select('destroy');
                  $('#sub').material_select('destroy');
                  $('#emp').empty();
                  $('#sub').empty();
                  $('#emp').append(data[0]);
                  $('#sub').append(data[1]);
                }

              });
            });
...