Question

我想添加动态下拉列表＆amp;文本框。但是对于文本框是可以的。我不能下拉。 Dropdown中没有包含数据。我循环检索刀片中的数据。我描述了我的代码。

form.blade.php

 <div class="form-group">
                <label for="type">Gas Container Type</label>
                <select class="form-control input-sm" name="gas" id="gas">
                    @foreach($gass as $gas)
                        <option value="{{$gas->name}}">{{$gas->name}}</option>
                    @endforeach


                </select><!-- end of Item_Drop_Down -->
            </div>
            <input name="name[]" type="text" id="name" class="name" placeholder="Input 1">
            <a href="#" id="add">Add More Input Field</a>

master.blade.php

<script>

$(document).ready(function () {
    var e = document.getElementById("gas");

    $('#add').click(function () {

        var inp = $('#box');

        var i = $('input').size() + 1;

        $('<div id="box' + i + '">' + '' +
                '<input type="text" id="name" class="name" name="name[]" placeholder="Input ' + i + '"/>' + '' +
                '<select id="gas"  name="gas[]" ' + i + '"/><img src="remove.png" width="32" height="32" border="0" align="top" class="add" id="remove" /> </div>')
                .appendTo($('#box form'));

        i++;

    });

    {{--<select data-bind="options: availableCountries, optionsText: 'name', optionsValue: 'value'"></select>--}}

    $('body').on('click', '#remove', function () {

        $(this).parent('div').remove();


    });


});

Controller.php这样

public function store(Request $request)
{

    foreach ($request->get('name') as $name) {
        $kg = new WarehouseGasIn();
        $kg->kg = $name;
        //dd($request->get('name'));
        $kg->save();

    }

Answer 1

这是你想要达到的目标吗？

＆＃13;

$(document).ready(function () {
  var boxesWrap = $('#boxes-wrap');
  var boxRow = boxesWrap.children(":first");
  var boxRowTemplate = boxRow.clone();
  boxRow.find('button.remove-gas-row').remove();
  
  // nb can't use .length for inputCount as we are dynamically removing from middle of collection
  var inputCount = 1; 

  $('#add').click(function () {
    var newRow = boxRowTemplate.clone();
    inputCount++;
    newRow.find('input.name').attr('placeholder', 'Input '+inputCount);
    boxesWrap.append(newRow);
  });  
  
  $('#boxes-wrap').on('click', 'button.remove-gas-row', function () {
  	$(this).parent().remove();
  }); 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxes-wrap">
  <div>
    <div class="form-group">
      <label>Gas Container Type</label>
      <select class="form-control input-sm" name="gas[]">
        <option value="gas-1">Container 1</option>
        <option value="gas-2">Container 2</option>
      </select><!-- end of Item_Drop_Down -->
    </div>
    <input name="name[]" type="text" class="name" placeholder="Input 1"> 
    <button class="remove-gas-row" type="button">Remove</button>
  </div>
</div>

<a href="#" id="add">Add More Input Field</a>

＆＃13;

Answer 2

 <script>


        $(document).ready(function () {

            $('#add').click(function () {

                var inp = $('#box');

                var i = $('input').size() + 1 - 2;

                $('<div id=box' + i + '"><input type="text" id="name" class="name" name="name[0][]" placeholder="Input ' + i + '"/><select class="form-control input-sm" name="shop" id="shop"><option value="">{{"Shop"}}</option>@foreach($branches as $branch)<option value="{{$branch->id}}">{{$branch->name}}</option>@endforeach</select><select name="name[1][]" id="gas" ' + i + '>@foreach($gass as $gas) <option value="{{$gas->id}}">{{$gas->name}}</option>@endforeach</select><img src="remove.png" width="32" height="32" border="0" align="top" class="add" id="remove" /> </div>').appendTo($('#box form'));


                i++;

            });


            $('body').on('click', '#remove', function () {

                $(this).parent('div').remove();


            });


        });


    </script>

在laravel中动态添加下拉框。 Javascript和laravel

2 个答案: