私はいつもこのシナリオに遭遇します。既存のデータに基づいてテンプレートにHTMLselect要素を事前設定する必要がありますが、そのための「良い」方法が見つかりません。この問題は、クライアント側とサーバー側の両方のテンプレートに存在しますが、ここでは例としてサーバー側のコードを使用します。
データ：
<?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要素の値はselected1 つ (または多数) の子要素の属性によって決定されるためoption、値を事前に選択することは一見困難です。次のように、テンプレートに条件を追加できます。
<select name="gender">
<option value="m"<?= $person['gender'] === 'm' ? ' selected' : '' ?>>Male</option>
<option value="f"<?= $person['gender'] === 'f' ? ' selected' : '' ?>>Female</option>
</select>
...しかし、これは多くの理由で良くありません。その理由の 1 つは、オプション リストが長くなると非常に苦痛になることです。
クライアントに値の入力を任せることもできます。
<select name="gender" data-value="<?= $person['gender'] ?>">
<!-- ... -->
</select>
<script>
// ...
$('select').each(function() {
$(this).val($(this).data('value'));
});
</script>
...しかし、この方法は簡潔ですが、完全に JS に依存しており、それ自体に問題があります。
それで、私の質問は次のとおりです。このタスクをどのように達成しますか? テンプレートからデータを分離することで、完全に回避していますか? それとも、私がこれまでに出会ったことのないトリックですか？