如何在Select2选择变更时触发HTMX调用并传递选中值？

首先你踩了两个关键坑：

• Select2的选中事件名是select2:select（冒号分隔），不是你写的select2.select
• 就算事件名对了，select2:select是jQuery自定义事件，HTMX默认只能监听原生DOM事件，所以直接用hx-trigger绑定这个事件没用

最简解决方案（仅需几行JS） #

方式一：转原生事件让HTMX监听

先写HTML结构：

<!-- 第一个Select2组件 -->
<select id="select1" name="select1" class="select2">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
</select>

<!-- 第二个选择框的容器，用HTMX监听自定义原生事件 -->
<div id="second-select-wrap" 
     hx-get="/your-backend-url" 
     hx-trigger="select2Changed from:#select1"
     hx-target="#second-select-wrap">
  <!-- 初始的普通选择框 -->
  <select name="select2">
    <option>请先选择第一个选项</option>
  </select>
</div>

然后加几行JS绑定Select2事件，触发原生自定义事件：

$(function() {
  // 初始化Select2
  $('#select1').select2();

  // 绑定Select2选中事件
  $('#select1').on('select2:select', function(e) {
    // 创建原生自定义事件，带上选中值
    const customEvent = new CustomEvent('select2Changed', {
      detail: { selectedVal: e.params.data.id }
    });
    // 触发事件，让HTMX捕获
    this.dispatchEvent(customEvent);
  });
});

后端接收到selectedVal参数后，返回对应的第二个选择框HTML即可，比如：

<select name="select2">
  <option value="a">选项1对应的子选项A</option>
  <option value="b">选项1对应的子选项B</option>
</select>

方式二：直接调用HTMX API（更简洁）

如果不想搞自定义事件，也可以直接在Select2事件里调用HTMX的ajax方法：
HTML结构不变，JS改成：

$(function() {
  $('#select1').select2();

  $('#select1').on('select2:select', function(e) {
    // 直接触发HTMX请求，传递选中值，替换目标容器
    htmx.ajax('GET', '/your-backend-url', {
      target: '#second-select-wrap',
      values: { selectedVal: e.params.data.id }
    });
  });
});

关于参数传递 #

上面两种方式都是把第一个选择框的选中值（e.params.data.id对应选项的value，用e.params.data.text可获取选项文本）传给后端，后端根据这个值生成对应的下拉选项HTML返回即可。

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