Este es un formulario dinámico simple para que pueda seleccionar un país desde el primer cuadro de selección. Cargará todos los estados de ese país en cada fila. Funcionaba bien para la primera fila, pero cuando hago clic en Add More y selecciono otro país para la siguiente fila, estaba cargando los estados de la última fila seleccionada en todas las filas. Resultados previstos
http://demo.webslesson.info/demo-add-remove-dynamic-dependent-drop-down-box/
Crear.blade.php
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <table class="table" id="dynamicTable12"> <tr> <th scope="col" width="250">Country</th> <th scope="col" width="250">State</th> </tr> <tr> <td> <select name="country[0]" class="form-control js" id="state" required="required"> <option value="">-- Select Project --</option> @foreach ($countries as $key => $value) <option value="{{ $key }}">{{ $value }}</option> @endforeach </select> </td> <td> <select name="state[0]" class="form-control js"> <option>-- Sub Head--</option> </select> </td> <td><button type="button" name="add" id="add12" class="btn btn-success">Add More</button></td> </tr> </table> <script type="text/javascript"> $(document).ready(function () { $(document.body).on("change.select2", "select[name^='country']", function () { var id_country = $(this).val(); var token = $("input[name='_token']").val(); $.ajax({ url: "<?php echo route('select-ajax') ?>", method: 'GET', dataType: 'json', data: { id_country: id_country, _token: token }, success: function (data) { $("select[name^='state'").html(''); $("select[name^='state'").html(data.options); } }); }); }); </script> <script> let initializeSelect2 = function () { $('.js').select2(); } var i = 0; $("#add12").click(function () { ++i; $("#dynamicTable12").append('<tr> <td> <select class="form-control js" name="country[' + i + ']" required="required"><option value="">--select--</option>@foreach ($countries as $key => $value)<option value="{{ $key }}">{{ $value }}</option>@endforeach</select></td> <td> <select name="state[' + i + ']" class="form-control js"><option>-- Sub Head--</option></select></td><td><button type="button" class="btn btn-danger remove-tr">Remove</button></td></tr>'); initializeSelect2() }); $(document).on('click', '.remove-tr', function () { $(this).parents('tr').remove(); }); $(document).ready(function () { initializeSelect2() }); </script> </body> </html>ajax-select.blade.php
<option value="0">--- Select Sub-Head ---</option> @if(!empty($states)) @foreach($states as $key => $value) <option value="{{ $key }}">{{ $value }}</option> @endforeach @endifControlador
public function create() { $countries = DB::table('projects')->pluck("name","id")->all(); return view('create',compact('countries')); } public function selectAjax(Request $request) { if($request->ajax()){ $states = DB::table('project_heads')->where('project_id',$request->id_country)->pluck("head","id")->all(); $data = view('ajax-select',compact('states'))->render(); return response()->json(['options'=>$data]); } } }