添加或刪除動態相關 select 框 Laravel

Question

這是一個簡單的動態表單，因此我可以從第一個 select 框中的 select 一個國家/地區，它將在每一行中加載該國家/地區的所有州。 第一行工作正常，但是當我單擊添加更多和 select 另一個國家時，它正在加載所有行中最后選擇的行狀態。 預期成績

http://demo.webslesson.info/demo-add-remove-dynamic-dependent-drop-down-box/

創建.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
@endif

Controller

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]); } } 
    
    }

Answer 1

替換以下代碼

<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 type="text/javascript">
        $(document).ready(function () {

            $(document.body).on("change.select2", "select[name^='country']", function () {
                var id_country = $(this).val();
                var el = $(this)
                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) {
                       el.closest("tr").find("select[name^='state']").html('');                    
             el.closest("tr").find("select[name^='state']").html(data.options);
                    }
                });
            });
        });
    </script>

希望：）

添加或刪除動態相關 select 框 Laravel

問題描述

1 個解決方案

解決方案1
1 已采納 2021-12-22 11:37:44

添加或刪除動態相關 select 框 Laravel

問題描述

1 個解決方案

解決方案1 1 已采納 2021-12-22 11:37:44

解決方案1
1 已采納 2021-12-22 11:37:44