javascript - 在表中选择更改选项时弹出模型

Question

我有一张 table ，里面有一个选择

<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) {
    ...
});