HTMX级联加载切换问题：切换公司后未自动刷新房间选项

问题梳理 #

已实现的功能：

• 初始化加载Company下拉选项
• 基于默认选中的Company自动加载Building下拉选项
• 基于默认选中的Building自动加载房间复选框列表
• 切换Company时重新加载Building选项
• 切换Building时重新加载房间选项

当前存在的问题：
切换Company后，新加载的Building会显示默认选中项，但房间列表不会自动根据这个默认值刷新。

解决方案 #

核心原因是Building下拉框更新后，没有触发房间列表的刷新逻辑。以下两种方案都能解决问题：

方案1：让Building加载完成后触发自身的change事件 #

修改Building的<select>标签，添加HTMX的after-settle事件钩子，手动触发change事件，这样房间列表监听的change from:#b就会生效：

<select 
    id="b" name="b" 
    hx-get="./get_bldgs.php" 
    hx-trigger="load from:#c delay:250ms, change from:#c delay:250ms" 
    hx-include="#c"
    hx-on::after-settle="this.dispatchEvent(new Event('change'))"
></select>

方案2：让房间列表监听Building的加载完成事件 #

调整房间区域的hx-trigger，新增对Building的htmx:afterSettle事件监听，只要Building更新完成就触发房间列表刷新：

<span 
    id="r"
    hx-get="./get_rooms.php"
    hx-trigger="load from:#b delay:1s, change from:#b delay:1s, htmx:afterSettle from:#b delay:1s"
    hx-include="#b"
></span>

关键注意点 #

• 确保get_bldgs.php返回的选项中包含带有selected属性的默认项，否则即使触发刷新，也没有选中值传递给get_rooms.php。
• 延迟时间可根据实际接口响应速度调整，避免请求重叠导致的异常。

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