我一直遇到这种情况：我需要根据一些现有数据在模板select中预填充 HTML元素，但我没有发现这样做的“好”方法。客户端和服务器端模板都存在此问题，但目前我将在示例中使用服务器端代码：
数据：
<?php
$person = [
'name' => 'Bob',
'gender' => 'm'
];
模板：
<!-- easy peasy -->
<input name="name" type="text" value="<?= $person['name'] ?>">
<!-- not so easy! -->
<select name="gender">
<option value="m">Male</option>
<option value="f">Female</option>
</select>
由于一个select元素的值是由selected一个（或多个）子option元素的属性决定的，因此很难预先选择一个值。您可以在模板中添加条件，如下所示：
<select name="gender">
<option value="m"<?= $person['gender'] === 'm' ? ' selected' : '' ?>>Male</option>
<option value="f"<?= $person['gender'] === 'f' ? ' selected' : '' ?>>Female</option>
</select>
...但这很糟糕，原因有很多，其中最重要的一点是，更长的选项列表会变得非常痛苦。
您也可以将其留给客户端来填充值，使用一点巫术：
<select name="gender" data-value="<?= $person['gender'] ?>">
<!-- ... -->
</select>
<script>
// ...
$('select').each(function() {
$(this).val($(this).data('value'));
});
</script>
...但是这种方法虽然简洁，但完全依赖于 JS，并且本身就有问题。
所以，我的问题是：你如何完成这项任务？您是否通过将数据与模板解耦来完全回避它？或者也许是一些我以前从未遇到过的把戏？