本文详解如何使用 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 核心实现（推荐精简版）
Country ID: | Currency ID:
? 关键技术说明
- 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 工作流。
