本文详解如何使用 alpinejs 在 codeigniter4 + twig 环境中实现两级联动下拉框——用户选择国家后，自动匹配并设置其默认货币，同时实时显示货币名称与描述。
在构建表单时，国家（Country）与货币（Currency）的级联联动是常见需求。AlpineJS 以其轻量、声明式和无需构建工具的特点，非常适合在传统 PHP 框架（如 CodeIgniter4）中快速实现此类交互逻辑。下面我们将从数据结构设计、模板绑定到状态管理，完整呈现一个健壮、可维护的解决方案。
✅ 前提：后端数据结构准备
确保你的 countryArray 和 currencyArray 已正确传递至 Twig 模板，并满足以下结构：
// 示例 PHP 数据（CodeIgniter4 控制器中）
$data['countryArray'] = [
['id' => 1, 'description' => 'united states', 'currencyId' => 1],
['id' => 2, 'description' => 'germany', 'currencyId' => 2],
['id' => 3, 'description' => 'japan', 'currencyId' => 3],
];
$data['currencyArray'] = [
['id' => 1, 'name' => 'USD', 'description' => 'US Dollar'],
['id' => 2, 'name' => 'EUR', 'description' => 'Euro'],
['id' => 3, 'name' => 'JPY', 'description' => 'Japanese Yen'],
];关键点：每个国家需携带 currencyId 字段，并通过 data-currency-id 属性注入 HTML 选项中，供前端读取。
✅ AlpineJS 核心实现（推荐精简版）
<div x-data="{
country: '',
currency: '',
currencyData: []
}"
x-init="currencyData = JSON.parse('{{ currencyArray|json_encode()|e('js') }}');"
>
<!-- 国家选择 -->
<div class="form-group">
<label for="country">{{ 'country'|translate }}</label>
<select
id="country"
name="country"
class="form-select"
aria-label="country"
x-model="country"
@change="currency = $event.target.selectedOptions[0]?.dataset?.currencyId || ''"
>
<option value="">{{ 'select_country'|translate }}</option>
{% for country in countryArray %}
<option
value="{{ country.id }}"
data-currency-id="{{ country.currencyId }}"
>
{{ country.description|capitalize|translate }}
</option>
{% endfor %}
</select>
</div>
<!-- 货币展示与隐藏字段（防篡改 + 提交用） -->
<div class="form-group">
<label>{{ 'currency'|translate }}</label>
<input type="hidden" name="currency" x-model="currency" />
<!-- 动态显示货币信息（只读展示） -->
<span
class="text-muted"
x-text="() => {
const c = currencyData.find(row => row.id == currency);
return c ? `${c.name} - ${c.description}` : '{{ 'select_country_first'|translate }}';
}"
></span>
</div>
<!-- （可选）调试用：实时显示当前 state -->
<small class="text-secondary d-block mt-2">
Country ID: <span x-text="country"></span> |
Currency ID: <span x-text="currency"></span>
</small>
</div>? 关键技术说明
- x-init 初始化数据：使用 JSON.parse() 安全解析 Twig 渲染的 JSON 字符串；|e('js') 是 Twig 的 JavaScript 转义过滤器，防止 XSS（务必启用）。
- @change 事件优化：使用 $event.target.selectedOptions[0] 替代 selectedIndex，更语义化且兼容性更好；增加空值防护 || ''。
- x-text 动态计算：采用箭头函数内联表达式，利用 find() 高效检索匹配货币对象，避免 filter()[0] 的冗余开销。
- 隐藏字段 x-model="currency"：确保表单提交时能正确发送 currency 值，同时禁止用户手动修改（符合业务逻辑：货币由国家决定）。
⚠️ 注意事项与最佳实践
- ❗ 不要直接在 x-for 中操作 selected 属性：原方案中
- ?️ 安全第一：始终对后端传入的 JSON 数据使用 |json_encode()|e('js')，杜绝脚本注入风险。
- ? 复杂场景建议抽离逻辑：若后续需支持“国家变更后重置其他字段”“异步加载货币列表”等功能，应使用 Alpine.data() 定义可复用组件：
Alpine.data('countryCurrencySelector', () => ({ country: '', currency: '', currencyData: [], init() { this.currencyData = JSON.parse(this.$el.dataset.currencies); }, onCountryChange() { this.currency = this.$refs.country.selectedOptions[0]?.dataset.currencyId || ''; } }))并在模板中调用 x-data="countryCurrencySelector"。
通过以上实现，你已拥有一套简洁、安全、可扩展的 AlpineJS 级联选择方案——无需额外 JS 文件，零构建依赖，完美融入现有 PHP/Twig 工作流。
