javascript - 如何在jquery中的当前表行索引上触发更改事件

Question

下表的 Tbody 被克隆超过 2 或 3 个，因此我将获得超过 2 个包含类选择器 .mbody 的 tbody 以及 tbody 中的两行。但是，当选择国家/地区选项时，我使用 Jquery Change 事件来获取省数据。

<div class="table-responsive">
    <table class="table" id="addressList">
         <thead>
            <tr>
                <th>{{ trans('multiple.country') }}</th>
                <th>{{ trans('multiple.province') }}</th> 
            </tr>
            </thead>
            <tbody class="mbody">
            <tr>
                <td>
                    <select class="country" name="country[]">
                     <option value="">-</option>
                        @foreach($country as $vals)
                             <option value="{{$vals['iso_code_3']}}" 
                                data-id="{{$vals['id']}}">
                                {{$detail['name']}}  {{$vals['id']}}
                             </option>
                        @endforeach
                    </select>
                </td>

                <td>
                    <select class="provinces" id="provinces" name="provinces[]" style="width: 100%"></select>
                </td>

                <td><a href="#" class="btn btn-info glyphicon glyphicon-plus" onclick="return false"></a></td>

            </tr>
            <tr>   
                <td>
                    <label> Fields Khmer</label>
                    <textarea class="form-control" name="fields_kh"></textarea>
                </td>

                <td>
                    <label>Fields English </label>
                    <textarea class="form-control" name="fields_en"></textarea>
                </td>
            </tr>
            </tbody>
    </table>        
</div>

Javascript:

我想在该表的当前行上选择国家/地区后获取省份数据

$(document).on('change', 'tbody.mbody tr td', function (e) {
    "use strict";
    if(typeof country === 'undefined')return;

    var provinces = $('.provinces');
    var pro = '<option value="">-</option>';

    if ($(this).children('select').hasClass('country')) {

        var countryId = parseInt($(".country").select2("data").element[0].dataset['id'])

        provinces.select2('val', ''); 

        $.each(country, function (inx, vals) {

            if (parseInt(vals.id) === countryId) {

                $.each(vals.provinces, function (inx, prov) {

                    pro += '<option value="' + prov.prov_gis + '" data-id="' + prov.id + '"> ' + prov.eng_name + ' </option>';
                });
            }
        });

        provinces.empty().append(pro);
    }
});

Select2 不包装 JS 追加后包含的省份

 provinces.empty().append(pro);

Answer 1

更改选择器以选择与克隆的 tbody 相关的元素

  var provinces = $(this).closest('tbody').find('.provinces');
  var countryId = parseInt($(this).closest('tbody').find(".country").select2("data").element[0].dataset['id'])

当您克隆元素时，会在克隆它们之前销毁 select2，然后在克隆后重新初始化它使用 select2 语法添加元素

$("#select2").select2('data', {});