使用通过 AJAX 从 PHP 加载的数据填充列表框

Fill listbox with data loaded from PHP via AJAX

我的目标是显示一个模态 div 在按下包含用户 ID 的按钮时加载两个列表框,一个包含可用的用户组,另一个包含用户当前所在的组。

此时正在获取数据成功

开发者工具日志:

[{id: 1, name: "Admin", idgrupo: 1, nome: "Administrador"},…]
0: {id: 1, name: "Admin", idgrupo: 1, nome: "Administrador"}
1: {id: 1, name: "Admin", idgrupo: 2, nome: "Cliente"}

但是数据没有显示在模式 div 上,没有任何错误代码。

代码如下:

##控制器:

public function getGroups($id)
{

  $data = \DB::table('grupoutilizador')
  -> join ('users', function ($join) use ($id){
    $join->on('users.id', '=', 'grupoutilizador.iduser')
    ->where('users.id', "=", $id );
  }) -> join ('grupo', 'grupo.idgrupo', "=", 'grupoutilizador.idgrupo') ->
  select('users.id', 'users.name', 'grupo.idgrupo', 'grupo.nome')
  -> get();



  return response()->json($data, 200);
}

##JavaScript:

function saveGroup(type,id){
  $('#useridgr').attr('placeholder', '').val('');
  $("#usernamegr").attr('placeholder', 'Nome').val('');
  $('#list_box').html('');
  $('#list_box_ini').html('');
  
  if (type == 1){
    
    
  } else {
    loadatagroup(id);
  }
  
}
var loadatagroup = (uid) => {
  
  $.ajax({
    type: 'GET',
    url: 'usergrupo/' + uid,
    data: {'_token': $("input[name='_token']").val()},
    success: function(data){
      
      $('#useridgr').attr('placeholder',data.id).val(data.id);
      $("#usernamegr").attr('placeholder',data.name).val(data.name);
       
      <?php
      
      $gruposini = mysqli_query($conn2,'SELECT *, 0 AS INUSE FROM grupo');
      
      while($row = mysqli_fetch_array($gruposini)) {
        
        $stringoption =  "$(\"#list_box_ini\").append(\"<option value='".$row['idgrupo']."'>".$row['nome']."</option>\");";
        
      }
      
      ?>
      
      for (i=0; i<data.lenght; i++){
        
        var id = response[i]['idgrupo'];
        var name = response[i]['nome'];
        
        $("#list_box").append("<option value='"+id+"'>"+name+"</option>");
      }
      
      
      
    }
    
  })
  
}

##HTML:

  <div class="card-body">
    
    
    <div class="form-group bmd-form-group">
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text"><i class="material-icons"></i></div>
        </div>
        <input name = 'id' type="text" class="form-control" placeholder="" id='useridgr' disabled hidden>
      </div>
    </div>
    
    
    <div class="form-group bmd-form-group">
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text"><i class="material-icons">face</i></div>
        </div>
        <input name = 'name' type="text" class="form-control" placeholder="" id='usernamegr' disabled>
      </div>
    </div>
    
    <select  id = "list_box_ini" name="list_box_ini"  multiple="multiple"> </select>
    
    
    <select  id = "list_box" name="list_box"  multiple="multiple"> </select>
    
  </form>
</div>

如何让数据显示出来?

我已经找到了解决方法,现在我需要清理并优化我的代码。

工作代码在这里:https://codereview.stackexchange.com/questions/248194/how-to-get-my-js-code-cleaner