在select元素中预选值

Question

我遇到了这个场景所有时间：我需要根据一些现有数据在模板中预填充HTML select元素，但我'我们没有找到“好”的方法。客户端和服务器端模板都存在此问题，但目前我将使用服务器端代码作为示例：

数据：

<?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并且本身就存在问题。

所以，我的问题是：你如何完成这项任务？你是否通过从模板中分离数据来完全回避它？或者也许是我之前从未遇到的一些技巧？