Есть механизм рендеринга, который воссоздает элементы каждый раз, когда отображается или скрывается столбец. Очевидно, что внутреннее состояние элемента select не следует.
Вы можете получить доступ к функции рендеринга и изменить ее, чтобы создать ссылку. Функция вызывается в таких параметрах, как эта:
responsive: {
details: {
renderer: function ( api, rowIdx, columns )
Визуализация вызывается для каждой строки, которая показана или скрыта. Поэтому он вызывается, когда вы щелкаете знак плюса или когда столбцы достаточно широки, чтобы показать исходный столбец. В этой функции вы можете построить элементы, которые будут добавлены, и установить правильный индекс для элемента select. Но так как это другой выбор, вам необходимо отслеживать изменения, внесенные в него, чтобы также обновлять оригинал. Как то так:
$(document).ready(function() {
$('#example').DataTable({
responsive: {
details: {
renderer: function(api, rowIdx, columns) {
// normally the render is only the data part, and then you return data
var data = $.map(columns, function(col, i) {
return col.hidden ?
'<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
'<td>' + col.title + ':' + '</td> ' +
'<td>' + col.data + '</td>' +
'</tr>' :
'';
}).join('');
// this is the custom part in which you manipulate the data before it is returned
if (data) {
var el = document.createElement('div');
el.innerHTML = data;
// here you set your new select element to the same index as the original one
el.querySelector('select').selectedIndex = api.cell({
row: rowIdx,
column: 3
}).node().querySelector('select').selectedIndex;
// you need to track changes on this new one to update original
el.querySelector('select').addEventListener('change', function(e) {
api.cell({
row: rowIdx,
column: 3
}).node().querySelector('select').selectedIndex = e.target.selectedIndex;
});
// you return a table with your element, which is the same as with the original
// render, but with the select set to proper index
return $('<table/>').append(el);
// this is also part of the original. This is called when no column is hidden
// you return nothing and so your element is removed
} else {
return false;
}
}
}
}
});
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css">
<table id="example" class="display responsive nowrap" style="width:100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Weird JQuery Behaviour</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>
<select>
<option value="123">123</option>
<option value="345">345</option>
<option value="456">456</option>
<option value="567">56</option>
<option value="678">67</option>
<option value="789">789</option>
</select>
</td>
</tr>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>
<select>
<option value="123">123</option>
<option value="345">345</option>
<option value="456">456</option>
<option value="567">56</option>
<option value="678">67</option>
<option value="789">789</option>
</select>
</td>
</tr>
</tbody>
</table>