Javascript 在表格中选择更改选项时弹出模型

我有一张桌子，里面有一张精选的

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

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

---

我正在使用一个模板，它有一个带有分页的动态表

我怀疑问题是您正在通过雕像的id获取它。id应该只与页面上的一个项目对应（id应该是唯一的）。您可能想做的是在select中添加一个类，并修改jquery选择器以选择该类

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

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

$（“.status select”）.on（'change'，函数（e）{
...
});

首先，HTML DOM只能包含单个ID。您可以执行以下操作：

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

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

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

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

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

---

您不应该在select元素中有一个静态ID，您可以通过添加一个函数来监听select更改来解决这个问题

函数myFunction（事件）{
//待办事项
}

---

您需要为on功能提供一个选择器。可能重复的Thank修复了问题，但仅在分页的第一页上；第二个on not working jQuery仅将处理程序应用于此代码运行时页面上存在的元素。如果希望分页正常工作，则需要在每次与分页交互时应用此选项。另一个可能更简单的解决方案是将所有内容移动到javascript函数，并在select上设置

onchange

属性。