首页 > 解决方案 > data-live-search="true" 不适用于多个条目,但适用于第一个条目

问题描述

单击“插入”按钮时,我需要一次为同一字段存储多个数据。这里data-live-search适用于第一个条目。当我添加下一个“行”时,data-live-search它不起作用。

表单的 Html 代码如下

<form action="{{ route('store') }}" method="POST" enctype="multipart/form-data">
  @csrf
  <div id="fields">
  </div>  
  <div class="row">
    <div class="col-md-3 form-group">
      <select class="form-control" name="company[]" class="selectpicker" data-live-search="true" id="selectcompany">
        <option selected disabled>Select Company</option>
        @foreach($getcompany as $company)
        <option value="{{ $company->id }}">{{ Str::limit($company->name, 100) }}</option>
        @endforeach
      </select>
    </div>
    
    <div class="input-group">
      <div class="input-group-btn">
        <button class="btn btn-success" type="button"  onclick="fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-success insert btn-lg" id="button">Insert</button>
</form>

这是JavaScript

<script>
  var room = 1;
  function fields() {
    room++;
    var objTo = document.getElementById('fields')
    var divtest = document.createElement("div");
    divtest.setAttribute("class", "form-group removeclass"+room);
    var rdiv = 'removeclass'+room;
    divtest.innerHTML = '<div class="row"><div class="col-md-3 form-group"><select class="form-control" name="company[]" class="selectpicker" data-live-search="true" id="selectcompany"><option selected disabled>Select Company</option>@foreach($getcompany as $company)<option value="{{ $company->id }}">{{ Str::limit($company->name, 100) }}</option>@endforeach</select></div><div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="remove_fields('+ room +');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div>';
    objTo.appendChild(divtest)
  }
  function remove_fields(rid) {
  $('.removeclass'+rid).remove();
  }
</script>

标签: javascripthtmllaravel

解决方案


推荐阅读