Question

我使用这个JS在HTML中动态创建字段，而在multiselect中我使用bootstrap multiselect是代码https://bootsnipp.com/snippets/Ekd8P，当我点击添加更多按钮时它会动态创建表单。

用于动态创建表单的js代码：

$(function() {
  // Remove button 
  $(document).on(
    'click',
    '[data-role="dynamic-fields"] > .form-horizontal [data-role="remove"]',
    function(e) {
      e.preventDefault();
      $(this).closest('.form-horizontal').remove();
    }
  );
  // Add button 
  var i = 1;
  $(document).on(
    'click',
    '[data-role="dynamic-fields"] > .form-horizontal [data-role="add"]',
    function(e) {
      e.preventDefault();
      var container = $(this).closest('[data-role="dynamic-fields"]');
      new_field_group = container.children().filter('.form-horizontal:first-child').clone();

      new_field_group.find('input').each(function() {

        if (this.name == 'tags[0]') {
          $(this).tagsinput('destroy');
          $(this).tagsinput('removeAll');
          this.name = this.name.replace('[0]', '[' + i + ']');
          var new_container = $(this).closest('[class="form-group"]');
          new_container.find(".bootstrap-tagsinput:first").remove();
        } else {
          $(this).val('');
        }
      });
      new_field_group.find('select').each(function() {

        if (this.name == 'addons[0]') {

          $(this).multiselect('rebuild');
          this.name = this.name.replace('[0]', '[' + i + ']');
          var new_container = $(this).closest('[class="multiselect-native-select"]');
          new_container.find(".multiselect-native-select > .multi").remove();

        } else {
          $(this).val('');
        }

      });

      i += 1;
      container.append(new_field_group);
    }
  );
});

和表单元素的html代码：

<form action="" method="post" novalidate="novalidate" enctype="multipart/form-data">
  {{ csrf_field() }}
  <div data-role="dynamic-fields">
    <div class="form-horizontal">
      <div class="row">
        <div class="col-sm-4">
          <div class="form-group">
            <label for="Firstname5" class="col-sm-3">Enter Dish Name</label>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="Name1" name="Name[]" required data-rule-minlength="2">
            </div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="form-group">
            <label for="Firstname5" class="col-sm-3">Enter Dish Price</label>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="Price" name="Price[]" required data-rule-minlength="2">
            </div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="form-group">
            <label for="Firstname5" class="col-sm-3">Select Food Type</label>
            <div class="col-sm-8">
              <select id="select1" class="form-control" name="select[]" required>
                @foreach($types as $type)
                <option value="{{$loop->iteration}}">{{$type->food_type_name}}</option>
                @endforeach
              </select>
              <p class="help-block" data-toggle="tooltip" data-placement="bottom" title="xyz"><i class="md md-info"></i></p>
            </div>
          </div>
        </div>



      </div>
      <div class="row">
        <div class="col-sm-4">
          <div class="form-group">
            <label for="Firstname5" class="col-sm-3">Dish Description</label>
            <div class="col-sm-8">
              <textarea name="Description[]" id="field-value" class="form-control" rows="1"></textarea>
            </div>
          </div>
        </div>
        <div class="col-sm-4 contacts">
          <div class="form-group">
            <label class="col-sm-3" for="rolename">Add Addons</label>
            <div class="col-sm-8">
              <select id="dates-field2" class="multiselect-ak form-control" name="addons[0]" id="trigger3" data-role="multiselect" multiple="multiple">
                @foreach($addons as $addon)
                <option value="{{$addon->addonid}}">{{$addon->addon_name}}</option>
                @endforeach
              </select>
            </div>
          </div>
        </div>

        <div class="col-sm-4">
          <div class="form-group">
            <label for="Firstname5" class="col-sm-3">Enter Tags</label>
            <div class="col-sm-8">
              <input type="text" value="" name="tags[0]" class="form-control" data-role="tagsinput" placeholder="e.g. spicy, healthy" />
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4">
          <div class="col-sm-4">
            <div class="checkbox checkbox-styled">
              <label><em>Half Plate Price</em>
                <input type="checkbox" value="" class="trigger2" id="trigger2" name="question">
              </label>
            </div>
          </div>
          <div class="col-sm-4">
            <div id="hidden_fields2" class="hidden_fields2" style="display:none;">
              <input type="text" id="hidden_field2" name="Price2[]" placeholder="Please Enter" class="form-control">
            </div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="col-sm-5">
            <div class="checkbox checkbox-styled">
              <label><em>Quarter Plate Price</em>
                <input type="checkbox" value="" class="trigger" id="trigger" name="question">
              </label>
            </div>
          </div>
          <div class="col-sm-4">
            <div id="hidden_fields" class="hidden_fields" style="display:none;">
              <input type="text" id="hidden_field" name="Price3[]" placeholder="Please Enter" class="form-control">
            </div>
          </div>
        </div>
      </div>
      <br>
      <button class="btn btn-delete" data-toggle="tooltip" data-placement="bottom" title="Delete Field" data-role="remove">
        Delete Item
      </button>
      <button class="btn ink-reaction btn-raised btn-primary" data-toggle="tooltip" data-placement="bottom" title="Add More Field" data-role="add">
        Add More Items
      </button>
    </div>
    <!-- /div.form-inline -->
  </div>
  <!-- /div[data-role="dynamic-fields"] -->
  <div class="form-group">
    <button type="submit" name="submit" href="#" class="btn ink-reaction btn-raised btn-primary" style="margin-top: -62px;margin-left: 160px;">Submit Items</button>
  </div>
  <!--end .form-group -->
</form>

问题在于，当我点击添加更多项目时，它会反映多次选择下拉列表，如此图所示。

我希望如果我点击添加更多项目按钮，它会重新显示多选下拉列表，就像在第一个状态一样。

看到这个jsfiddle.net/akshaycic/svv742r7/7它会清除你所有的疑问。在点击加号按钮上，它没有反映到“未选择”状态，它将保持其初始状态。

任何线索都会有所帮助。提前谢谢。

动态多重选择功能

0 个答案: