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>

在此处，当管理员单击add new按钮时，将在页面中添加一个选择元素。我的问题是在select元素中创建选项。我有这个foreach我需要将其放入此js代码中！

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

Answer 1

在这种情况下，由于您要附加的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>

还要注意这里使用不引人注目的事件处理程序。在您的HTML中使用内联事件处理程序，例如onclick等，是不好的做法，应尽可能避免。

Answer 2

您可以执行以下操作：

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);
 }

如何将Laravel foreach放入JS文件中？

2 个答案: