本文详解如何使用 alpinejs 实现两个 select 的动态联动：当用户选择国家时，自动匹配并设置其默认货币，并实时显示货币名称与描述。
在构建多语言、多区域的 Web 表单（如注册页、结算页）时，国家与货币的级联选择是常见需求。借助 AlpineJS 的响应式数据绑定与轻量事件处理能力，无需引入复杂框架或编写冗长 JS 脚本，即可优雅实现这一功能。
以下是一个完整、可直接集成到 CodeIgniter4 + Twig 模板中的 AlpineJS 解决方案：
✅ 核心思路
- 后端（PHP/Twig）预先将 countryArray（含 id, description, currencyId）和 currencyArray（含 id, name, description）传入模板；
- Alpine 组件通过 x-data 初始化空状态，并用 x-init 安全解析后端 JSON 数据；
- 国家
- 通过 @change 监听切换，提取选中项的 dataset.currencyId 并赋值给响应式变量 currency；
- 货币信息不依赖第二个
✅ 完整代码示例（Twig + 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.options[$event.target.selectedIndex].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 x-text="
() => {
const matched = currencyData.find(c => c.id == currency);
return matched ? `${matched.name} - ${matched.description}` : '{{ 'select_country_first'|translate }}';
}
"></span>
</div>
<!-- （可选）调试信息 -->
<div class="text-muted small mt-2">
当前国家 ID：<span x-text="country"></span>｜当前货币 ID：<span x-text="currency"></span>
</div>
</div>⚠️ 注意事项与最佳实践
- 安全转义：务必使用 |e('js')（Twig 的 JavaScript 上下文转义）包裹 json_encode() 输出，防止 XSS；
- 数据结构一致性：确保 countryArray 中的 currencyId 与 currencyArray 中的 id 类型一致（推荐均为字符串或整数）；
- 用户体验优化：添加空选项提示（如 'select_country'|translate），并在未选国家时显示友好占位文本；
- 扩展性建议：若后续需支持“允许用户覆盖货币”，可将 替换为第二个
- 性能提醒：currencyData.find() 在货币数量较少（ [c.id, c]))"）。
? 进阶提示：当逻辑持续复杂化（如增加时区、语言、税率等多级联动），建议迁移到 Alpine Data Functions 或封装为可复用的 x-data="countryCurrency()" 自定义指令，提升可维护性与测试性。
通过以上实现，你已掌握 AlpineJS 处理表单联动的核心模式：声明式数据 + 原生事件 + 函数式渲染。简洁、可控、无侵入——这正是 AlpineJS 赋予前端开发者的高效生产力。
