本文详解如何使用 alpinejs 在双级下拉框中实现“选国家 → 自动设对应货币”的动态联动，涵盖数据绑定、事件响应、json 数据注入及条件渲染等核心技巧，并提供可直接运行的 twig + codeigniter4 集成示例。
在构建多级关联表单（如国家/货币、省份/城市）时，前端需在用户选择上级项后，自动更新下级项的默认值或可选项。AlpineJS 凭借其轻量、声明式语法与无缝 HTML 集成能力，是此类场景的理想选择。以下为完整、健壮、生产就绪的实现方案。
✅ 核心思路
- 后端（CodeIgniter4 + Twig）将国家数组 countryArray 与货币数组 currencyArray 一并传递至模板；
- 利用 data-currency-id 属性将每个国家与其关联货币 ID 绑定在
- Alpine 使用 x-data 初始化响应式状态（country、currency、currencyData）；
- 通过 x-init 安全解析后端传入的 JSON 数据（注意使用 |e("js") 防 XSS）；
- @change 监听国家选择变化，从 DOM 中提取 dataset.currencyId 并同步至 currency 状态；
- 下级货币字段采用「隐藏输入 + 可读文本展示」组合：x-model="currency" 保证表单提交值正确，x-text 动态渲染货币名称与描述，提升用户体验。
? 完整代码示例（Twig 模板）
<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>
<!-- 提交用隐藏字段，确保后端接收到 currency 值 -->
<input type="hidden" name="currency" x-model="currency" required>
<!-- 可读性展示：仅显示，不可编辑 -->
<span class="text-muted" x-text="
() => {
const matched = currencyData.find(c => c.id == currency);
return matched ? `${matched.name} - ${matched.description}` : '{{ 'select_country_first'|translate }}';
}
"></span>
</div>
<!-- （可选）调试信息 -->
<div class="mt-2 text-sm text-gray-500">
当前国家 ID：<span x-text="country"></span>｜当前货币 ID：<span x-text="currency"></span>
</div>
</div>⚠️ 关键注意事项
- 安全转义：务必使用 |e("js")（Twig 的 JavaScript 转义）包裹 json_encode() 输出，防止 JSON 字符串中的引号或特殊字符破坏 JS 语法或引发 XSS。
- 数据结构一致性：确保 countryArray 中每个对象含 currencyId 字段，且 currencyArray 中每个货币对象含 id、name、description 字段，类型严格匹配（推荐字符串 ID）。
- 空值处理：初始状态 currency 为空字符串，x-text 表达式中使用 find()（非 filter()[0]）更高效；同时添加友好提示（如 select_country_first），避免空白显示。
- 表单完整性：隐藏字段 name="currency" 必须存在且 x-model 绑定正确，否则 POST 数据中将丢失该值。
- 扩展建议：当逻辑变复杂（如异步加载货币、多级联动、校验依赖），应迁移至 Alpine.data() 外部定义（官方文档），提升可维护性与测试性。
此方案零依赖、无构建步骤，完美适配传统服务端渲染架构，是 AlpineJS 入门与进阶实践的典型范例。
