Dynamically add dropdown box in laravel. Javascript and laravel

Question

I want to add dynamic dropdown & textbox. But for textbox is ok. I am not ok in dropdown. The Data are not include in Dropdown.I am loop to retrieve data in blade.I am describe my code.

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

is this the sort of thing you are trying to achieve?

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

 <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> 

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>