javascript - 在 Laravel 5.8 中将新数据放入 Blade @foreach

标签 javascript laravel laravel-blade


我的页面中有 select 标签,选项来自数据库。
当我运行 JS 代码时,我收到了除旧数组之外需要传递的新数组(在新数组中我收到了新选项)

<select name="category_id" class="form-control custom-select" id="variant_colour">
<option selected>Select variant...</option>
				@foreach($attributes_colour_selected as $variant)
        <option value="">{{$variant->attributes_colour}}</option>
				@endforeach
</select>

<script>
  $('#variant_model').change(function(){
    var value = $('select#variant_model').val();
    $.ajaxSetup({
    headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
    });
    $.ajax({
      type:"POST",
      url: "showVariantModel",
      data: {value:value},
      success: function(data){
      var attr = 'I don't know what to pass here';
      
      $('#variant_colour:last').append(attr);

      }
    })

  });
</script>	

您能建议更改 foreach 参数的最简单方法吗? 新变量来自 Controller 。 当我这样写字符串时:

<script>
var attr = '@foreach($attributes_colour_selected as $variant)'+
          'blablabla'+
          '@endforeach';
</script>

没有任何效果...

最佳答案

你可以简单地执行foreach,因为你没有解释你要返回的数组类型,所以我简单地假设它是一个{key: value} code> 类型数组,所以在你的成功函数中

success: function(response){
  let select = document.querySelector('#variant_colour')
  select.innerHTML = '' //if you want to remove previous options 
  response.forEach((op)=>{
    select.innerHTML += `<option value=${op.id}>${op.value}</option>`
 })
}

此外,您还需要在 Blade 的选项值属性中提供一些值

<option value="{{ $variant->id }}">{{$variant->attributes_colour}}</option> //set some value example id

关于javascript - 在 Laravel 5.8 中将新数据放入 Blade @foreach,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56030007/

相关文章:

JavaScript 点击函数表格单元格仅应用于第一行

javascript - Ajax回调后未检测到点击

php - 如何在具有多个 foreach 的表单中仅显示 1 个提交按钮

php - 在 Laravel 5.3 中构建链接的正确方法

php - Laravel 查询生成器统计所有 25 到 35 岁的单例

postgresql - Laravel Eloquent CAST() 表列与 postgres 生成错误

Laravel 7 无法解析的依赖解析 - Blade 组件

javascript - "The specified module could not be found"使用 node-gyp 构建 Canvas 时

javascript - ES6 .filter() 将返回一个没有特定字符串的对象数组

javascript - RxJS 主题从未推送过第一个下一个