如何将Laravel foreach放入JS文件？

Question

我有这个select-box，我只是通过jQuery添加了它：

<span onclick="createProduct()">Add New<i class="fa fa-plus"></i></span>

<script>

function createProduct() {
        var html = '';
        html += '   <div class="col-xs-12">';
        html += '      <div class="form-group">';
        html += '          <div class="input-group">';
        html += '               <span class="input-group-addon input-group-addon-small"><i class="sicon-tag-special"></i></span>';
        html += '               <select class="form-control" name="category_id" style="width: 100%">';
        html += '                  <option value="">Select Category.. </option>';
        html += '                  <option value="">Category1</option>';
        html += '                  <option value="">Category2</option>';
        html += '               </select>';
        html += '          </div>';
        html += '       </div>';
        html += '    </div>';

     $('#products_div').prepend(html);
 }

</script>

这里，当管理员点击按钮添加新的此选择添加到页面中，但是我对选择中的选项有疑问，我有这个foreach，我需要将其放入此js代码中！

@foreach($categories as $category)
    <option value="{{ $$category->id }}">{{ $category->name }}</option>
@endforeach

Answer 1

@foreach($categories as $category)
    <option value="{{ $$category->id }}">{{ $category->name }}</option>
@endforeach

->

categories.forEach((category) => {
   html += `<option value="${category.id}">${category.name}</option>`;
});

Answer 2

我认为您正在尝试动态生成选择下拉列表和选项。因此，首先从您共享的html中生成不包含选项的选择下拉列表，然后再编写一种方法来生成选项。

Answer 3

在这种情况下，由于您要附加的HTML由Laravel后端的内容控制，因此取消HTML和JS的耦合会更有意义。这样，在页面加载时在DOM中创建HTML并将其隐藏。然后，在JS中，您可以克隆该HTML，并将其附加在需要显示的位置。像这样的东西：

$('.add-new-product').on('click', function() {
  var $clone = $('#new-product-content > div').clone();
  $clone.appendTo('#products-div');
});

#new-product-content {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="add-new-product">Add New<i class="fa fa-plus"></i></span>
<div id="products-div"></div>

<div id="new-product-content">
  <div class="col-xs-12">
    <div class="form-group">
      <div class="input-group">
        <span class="input-group-addon input-group-addon-small"><i class="sicon-tag-special"></i></span>
        <select class="form-control" name="category_id" style="width: 100%">
          <option value="">Select Category...</option>
          <!-- 
          output your categories here, eg.
          @foreach($categories as $category)
            <option value="{{ $$category->id }}">{{ $category->name }}</option>
          @endforeach
        
          Below is just for demo purposes... -->
          <option value="lorem">Lorem</option>
          <option value="ipsum">Ipsum</option>
          <option value="dolor">Dolor</option>
          <option value="sit">Sit</option>
        </select>
      </div>
    </div>
  </div>
</div>

Answer 4

您可以做这样的事情：

function createProduct() {
  // Echo the JSON for the options in your JS
  var options =  @json($categories);
  // Map options to their HTML version, and join them
  var optionsHtml = options.map(function (opt) {
    return '<option value="' + opt.id + '">' + opt.name + '</option>';
  }).join('');

  var html = '   <div class="col-xs-12">'
           + '      <div class="form-group">'
           + '          <div class="input-group">'
           + '               <span class="input-group-addon input-group-addon-small"><i class="sicon-tag-special"></i></span>'
           + '               <select class="form-control" name="category_id" style="width: 100%">'
           + '                  <option value="">Select Category.. </option>'
           + optionsHtml // Add them here
           + '               </select>'
           + '          </div>'
           + '       </div>'
           + '    </div>';

     $('#products_div').prepend(html);
 }