0

我一直遇到这种情况：我需要根据一些现有数据在模板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，并且本身就有问题。

所以，我的问题是：你如何完成这项任务？您是否通过将数据与模板解耦来完全回避它？或者也许是一些我以前从未遇到过的把戏？

4

0 回答 0