如何让hx-trigger的触发条件依赖下拉框选中的选项值？

完全可以通过hx-trigger的条件配置实现该需求，HTMX 原生支持在触发规则中嵌入自定义判断条件，你只需要在条件中校验下拉框的选中值即可。

具体实现方式 #

1. 基于hx-trigger条件语法实现 #

hx-trigger 支持在事件名后加方括号[]包裹 JavaScript 条件表达式，只有表达式返回true时才会执行对应的 HTMX 动作。

比如你需要选中scala时才触发请求加载第二个下拉框，示例代码如下：

<!-- 第一个下拉框 -->
<select 
  hx-get="/api/second-select-options"
  hx-target="#second-select-wrap"
  hx-trigger="change[event.target.value === 'scala']"
>
  <option value="scala">Scala</option>
  <option value="java">Java</option>
</select>

<!-- 第二个下拉框容器 -->
<div id="second-select-wrap"></div>

上述配置中，只有当下拉框触发change事件时，会先判断当前选中值是否为scala，符合条件才会发起请求拉取第二个下拉框的内容渲染到目标容器中，选中其余选项不会触发任何动作。

如果需要支持多个特定值触发，直接修改条件表达式即可，示例：

hx-trigger="change[['scala', 'java'].includes(event.target.value)]"

2. 纯前端显隐控制（无需发起请求） #

如果你不需要和后端交互，仅要控制已有第二个下拉框的显示隐藏，可以配合hx-on实现即可：

<select 
  hx-on:change="document.querySelector('#second-select').style.display = event.target.value === 'scala' ? 'block' : 'none'"
>
  <option value="scala">Scala</option>
  <option value="java">Java</option>
</select>

<select id="second-select" style="display: none;">
  <!-- 第二个下拉框选项 -->
</select>

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