joh*_*ohn 3 javascript datatables
我这里有一个简单的例子.这是一个带有js和css文件的"all in one"html.
我正在使用DataTables响应主题.
以下是问题复制步骤:
1)将以下代码保存到html文件中
2)在Chrome浏览器中打开此文件
3)减小浏览器的大小,使第四个字段不可见
4)单击绿色的"+"扩展按钮
5)选择任何值
6)单击绿色的"+"按钮以折叠
7)再次单击绿色的"+"按钮展开
8)实际上并未选择您选择的值
为什么???
<html>
<head>
<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">
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</head>
<body>
<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>
</tbody>
</table>
</body>
</html> Run Code Online (Sandbox Code Playgroud)
我必须保持所选条目显示为已选中.我怎样才能做到这一点?
从选择列表中选择选项时,为什么DOM未被修改?
它是......但它更新了select元素的当前值,而不是它的默认值.
实际上并未选择您选择的值.为什么?
大概(并且我不打算深入研究你链接到的缩小的源代码以确定),库读取innerHTML表并重写它.
它不存储select的当前值(未序列化innerHTML),因此当它将其写回时,select会重置为其默认值.
| 归档时间: |
|
| 查看次数: |
297 次 |
| 最近记录: |