Docassemble中动态联动下拉菜单的实现：国家与州/省选择器优化

---
question: |
  请选择您居住的国家。
fields:
 - Country: jurisdiction.country
   input type: combobox
   code: countries_list()
---
question: |
  请选择您居住的州/省。
fields:
 - ${ subdivision_type(jurisdiction.country) }: jurisdiction.state
   input type: combobox
   code: states_list(jurisdiction.country)
---

---
question: |
  请选择您居住的国家和州/省。
fields:
  - Country: jurisdiction.country
    input type: combobox
    code: countries_list()
    # 当国家选择改变时，触发页面刷新
    background response:
      refresh: True
  - State: jurisdiction.state
    input type: combobox
    # 州/省选项会根据jurisdiction.country重新计算
    code: states_list(jurisdiction.country)
    # 字段标签也会根据jurisdiction.country重新计算
    label: ${ subdivision_type(jurisdiction.country) }
---

---
question: |
  请选择您居住的国家和州/省。
fields:
  - Country: jurisdiction.country
    input type: combobox
    code: countries_list()
    # 注意：这里没有refresh，需要自定义JS来联动
    # 如果要使用input type: ajax实现联动，需要确保country_code变量能被传递到后台
    # 并且需要前端JS来触发州字段的更新
  - State: jurisdiction.state
    input type: ajax
    # 异步获取州/省选项
    background response:
      # 将当前选定的国家代码作为参数传递给后台函数
      arguments:
        country_code: jurisdiction.country
      code: |
        output(states_list(country_code))
    # 标签默认不会自动更新，需要自定义JS
    label: State # 初始标签，需要JS动态修改
---

/* 假设Docassemble为字段生成了可预测的ID，例如 'id_jurisdiction_country' 和 'id_jurisdiction_state' */
document.addEventListener('DOMContentLoaded', function() {
    const countryField = document.getElementById('id_jurisdiction_country');
    const stateField = document.getElementById('id_jurisdiction_state');
    const stateLabel = document.querySelector('label[for="id_jurisdiction_state"]'); // 假设标签与字段通过for属性关联

    if (countryField && stateField && stateLabel) {
        countryField.addEventListener('change', function() {
            const selectedCountry = this.value;

            // 1. 发送Ajax请求获取新的州/省选项和标签文本
            // 这需要一个Docassemble的自定义背景响应端点，或者一个完全独立的Ajax处理逻辑
            // 示例：假设有一个自定义的Docassemble背景响应，可以返回州列表和细分类型
            DA.background_request({
                data: { country: selectedCountry },
                url: '/your_custom_ajax_endpoint', // 需要在Docassemble中定义此端点
                success: function(data) {
                    // data 假设包含 { states: [{value: 'CA', label: 'California'}], subdivision_type: 'State' }
                    // 2. 更新州/省字段的选项
                    stateField.innerHTML = ''; // 清空现有选项
                    data.states.forEach(state => {
                        const option = document.createElement('option');
                        option.value = state.value;
                        option.textContent = state.label;
                        stateField.appendChild(option);
                    });

                    // 3. 更新州/省字段的标签
                    if (data.subdivision_type) {
                        stateLabel.textContent = data.subdivision_type;
                    }
                },
                error: function(error) {
                    console.error('Error fetching states:', error);
                }
            });
        });
    }
});