添加或刪除動態相關 Select 框

Question

我有依賴 3 級 select 框的動態字段問題是依賴 select 框不工作

laravel刀片

 <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 ，它代表每行中的 select

<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

您可以使用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>'); }); } }); } });