Блог

У меня есть динамические поля с зависимыми полями выбора 3 уровня, Проблемы в том, что зависимые поля выбора не работают

лезвие ларавеля

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

сценарий, обрабатывающий зависимые выборы ( проблема в основном здесь с переменной i ) я хочу передать переменную i в этом сценарии, которая представляет выбор в каждой строке

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

                }






            });
 

Вместо использования индексов вы можете использовать starts with селектор для поиска элементов и привязки к ним событий.

Найдите ближайшего родителя для всех необходимых элементов, затем найдите необходимые элементы относительно этого родителя и соответствующим образом обновите эти элементы.

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