Question

我有一张桌子，里面有一张选择

<tbody>
    @foreach($cheques as $key => $cheque)
        <tr data-id="{{ $cheque->id }}">
            <td><a href="#" class="btn-detail-cheque">{{ $cheque->reference }}</a></td>
            <td>{{ $cheque->amount }}</td>
            <td>{{ $cheque->owner }}</td>
            <td>{{ $cheque->receiver }}</td>
            <td>{{ $cheque->date_entree->format('d/m/Y') }}</td>
            <td>{{ $cheque->date_payment->format('d/m/Y') }}</td>
            <td>
                <select name="statue" class="form-control" id="statue">
                    <option value="0" {{ $cheque->statue == "0" ? 'selected':'' }}>{{ __('messages.cheques.waiting') }}</option>
                    <option value="1" {{ $cheque->statue == "1" ? 'selected':'' }}>{{ __('messages.cheques.payed') }}</option>
                    <option value="2" {{ $cheque->statue == "2" ? 'selected':'' }}>{{ __('messages.cheques.not_payed') }}</option>
                    <option value="3" {{ $cheque->statue == "3" ? 'selected':'' }}>{{ __('messages.cheques.transfered') }}</option>
                </select>
            </td>
            <td>
                <a href="{{ url('/cheques/edit/'.$cheque->id) }}" class="text-info btn-edit"><i class="fa fa-edit"></i></a>
                <a href="#" class="text-danger btn-remove"><i class="fa fa-trash-alt"></i></a>
            </td>
         </tr>
    @endforeach
</tbody>

我想每次选择雕像更改时都想弹出模型，这就是我所做的事情

        $("#statue").on('change', function(e){
            e.preventDefault();

            var tr = $(this).parents('tr');
            var id = $(tr).data('id');
            var statue = $(this).val();

            bootbox.confirm({
                size: "small",
                message: "{{__('messages.cheques.statue_confirmation')}}",
                buttons: {
                    confirm: {
                        label:"{{__('messages.buttons.confirm')}}",
                        className: 'btn-sm btn-danger'
                    },
                    cancel: {
                        label:"{{__('messages.buttons.cancel')}}",
                        className: 'btn-sm btn-defaul'
                    }

                },
                callback: function(result){
                    if(result){
                        if(statue == 3){
                            $("#transfer-cheque-form").find("#id").val(id);
                            $("#transfer-cheque").modal();
                        }else{
                            $.post('change-statue/'+id, {_token:$('meta[name="csrf-token"]').attr('content'), statue:statue}, function(data){
                                if(data.success){
                                }
                            });
                        }

                    }
                }
            });
        });

但是问题是模型仅在表格的第一项上弹出，否则什么也不会发生

我正在使用模板，该模板具有带有分页的动态表

Answer 1

我怀疑问题是您正在按雕像ID抓取它。该ID应该仅与页面上的一项相对应（ID应该是唯一的）。您可能想要做的是将一个类添加到您的选择中，然后修改您的jquery选择器以选择该类。

<select name="statue" class="form-control" id="statue" class="statue-select">

$(".statue-select").on('change', function(e) {
    ...
});

Answer 2

首先，HTML DOM只能包含具有ID的单个。你可以做：

$('select[name="statue"]').on('change', function(e) {
    ...
});

例如，如果您的元素在ajax分页中被动态附加/操纵，则可以执行以下操作：

$(document).on('change', 'select[name="statue"]', function(e) {
    ...
});

Answer 3

您应该在select元素中没有静态ID，可以解决添加函数以侦听select更改的问题

function myFunction(event){
  //TODO
}

<select onchange="myFunction(event)">

在表格中的选择更改选项上弹出模型

3 个答案: