如何在Pug/Jade模板中用select选中值调用nigeria.lgas()函数？

错误原因 #

你直接在Pug的each循环里写nigeria.lgas(selState1.value)，Pug会在服务器编译阶段执行这段代码，但selState1是客户端的DOM元素，服务器端根本不存在，所以触发"selState1 is not defined"报错。同时第二个select是静态渲染的，无法自动跟随第一个select的选中值动态更新选项，必须用客户端JavaScript处理联动逻辑。

修正后的完整代码 #

1. 州选择组件（修正事件与属性）

select.form-select.col-xs-12.col-sm-12(id='selState1', onChange='handleStateChange(this.value)')
  option(value='') Enter state
  each state in nigeria.states()
    option(value=state) #{state}

• 替换onClick为onChange：下拉选项切换用change事件更贴合场景
• 移除option上重复的id='selState1'：DOM元素id必须唯一
• 修正option的value值：value=state（无需引号），确保选项值为实际州名而非固定字符串'state'

2. 地方政府选择组件（仅渲染默认选项）

select.form-select.col-xs-12.col-sm-12(id='selLG1', name='selLG1')
  option(value='', selected) Enter Local Government

先只渲染默认提示选项，动态选项由JS生成。

3. 客户端JavaScript联动逻辑

function handleStateChange(selectedState) {
  const lgSelect = document.getElementById('selLG1');
  // 清空现有选项，保留默认提示
  lgSelect.innerHTML = '<option value="" selected>Enter Local Government</option>';
  
  if (!selectedState) return; // 未选择州时直接返回
  
  // 获取对应地方政府列表
  const lgas = nigeria.lgas(selectedState);
  
  // 动态生成并添加选项
  lgas.forEach(lg => {
    const option = document.createElement('option');
    option.value = lg;
    option.textContent = lg;
    lgSelect.appendChild(option);
  });
  
  // 保留你原有的setState逻辑（如果需要）
  // setState(selectedState);
}

内容的提问来源于stack exchange，提问作者Femi