Question

我正在尝试将从我的PHP脚本之一接收的数据附加到表单上的两个选择框。但是，只有一个框接收数据，而另一个变为空白。从脚本接收的数据是一个包含两个元素的数组。两者都是字符串。

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

我尝试注释掉第一个append语句（以及两个空语句），以查看第二个append语句是否将执行并执行。

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>

在控制台中没有收到错误。预期的输出将具有ids：sub，emp的“选项”，以显示从ajax成功函数发送给他们的文本。

编辑：如果对$('#sub')进行了标贴处理，则与$('#emp')无关。

Answer 1

问题是与引导程序的材料设计不兼容。这需要您初始化/销毁选择框。

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

              });
            });

如何在ajax成功函数中将数据追加到多个元素？

1 个答案: