添加或删除动态相关 Select 框

Question

I have dynamic fields with dependent 3 level select boxes The problems is the dependent select boxes not working

laravel blade

 <tbody class="addMoreProduct">


                                        <tr>
                                            <td>1</td>
                                            <td>
                                                <select name="categorie_id[0]" id="categorie_id" class="form-control categorie_id " >
                                                    <option value=""> choisir categorie </option>
                                                    @foreach ($categories as $categorie)
                                                        <option value="{{ $categorie->id }}">
                                                            {{ $categorie->categorie_name }}
                                                        </option>
                                                    @endforeach


                                                </select>
                                            </td>
                                            <td>  <select name="product_id[0]" id="categorie_id" class="form-control product_id " >
                                                <option value=""> choisir Produit </option>
                                              


                                            </select></td>
                                            <td>  <select name="size_id[0]" id="categorie_id" class="form-control size_id " >
                                                <option value=""> choisir Designation </option>
                                             


                                            </select></td>



                                            <td>

                                                <input type="number" name="quantity[0]" class="form-control" />
                                            </td>
                                            <td>
                                                <input type="text" name="unit_price[0]" class="form-control" />
                                            </td>
                                            <td>

                                                <input type="text" name="total_price[0]" class="form-control" readonly />
                                            </td>
                                            <td> <a href="#">Delete</a>
                                            </td>

                                        </tr>
                                    </tbody>

script that adding new fields:

 <script>
    
   var i=0;
  
    $('.add_more').on('click', function() {
         
        ++i;
        var categorie = $('.categorie_id').html();
       
        
        var numberofrow = ($('.addMoreProduct tr').length - 0) + 1;
   
        var tr = '<tr><td class"no"">' + numberofrow + '</td>' +
            '<td> <select class="form-control categorie_id  "  id="categorie_id" name="categorie_id['+i+']" >' + categorie +
            '</select></td>' +
            '<td>  <select class="form-control product_id  "  id=product_id" name="product_id['+i+']" ></select></td>' +
            '<td>  <select class="form-control size_id  "  id="size_id" name="size_id['+i+']" ></select></td>' +
            '<td> <input type="number" name="quantity['+i+']" class="form-control"></td>' +
            '<td> <input type="number" name="unit_price['+i+']" class="form-control"></td>' +
            '<td> <input type="number" name="total_price['+i+']" class="form-control"></td>' +
            '<td> <a class="btn btn-danger btn-sm delete rounded-circle"><i class="fa fa-times-circle"></a></td>';
         
               
                $('.addMoreProduct').append(tr);
               
                
                })
    

</script>

script that handling the dependent selects ( the problem is basically here with i variable ) i want to pass the variable i in this script which represents the select in each row

<script type="text/javascript">

        jQuery(document).ready(function() {

            jQuery('select[name="categorie_id['+i+']"]').on('change', function() {
                var categorieID = jQuery(this).val();
                if (categorieID) {
                    jQuery.ajax({
                        url: '/getProducts/' + categorieID,
                        type: "GET",
                        dataType: "json",
                        success: function(data) {
                            console.log(data);
                            jQuery('select[name="size_id['+i+']"]').empty();
                            jQuery('select[name="product_id['+i+']"]').empty();

                            jQuery.each(data, function(key, value) {
                                $('select[name="product_id['+i+']"]')
                                    .append('<option value="' +
                                        key + '">' + value + '</option>');
                            });

                        }
                    });
                } else {
                    $('select[name="product_id['+i+']"]').empty();
                    $('select[name="size_id['+i+']"]').empty();

                }






            });

Answer 1

Instead of using indexes, you could use starts with selector to find elements and bind events to them.

Find closest parent for all your required elements then find the required elements relative to that parent and update those elements accordingly.

 $(document).on('change', 'select[name^="categorie_id"]', function() { var curEle = jQuery(this); var categorieID = curEle.val(); var parentEle = curEle.closest('tr'); var prodEle = parentEle.find('select[name^="product_id"]'); var sizeEle = parentEle.find('select[name^="size_id"]'); sizeEle.empty(); prodEle.empty(); if (categorieID) { jQuery.ajax({ url: '/getProducts/' + categorieID, type: "GET", dataType: "json", success: function(data) { jQuery.each(data, function(key, value) { prodEle.append('<option value="' +key + '">' + value + '</option>'); }); } }); } });