HTMX页面如何将两个下拉框选中值纳入GET请求？

我在HTMX页面里有两个下拉菜单，希望GET请求的URL同时包含两个下拉框的选中值。目前HTMX只会自动把触发请求的那个下拉框的参数加入URL，我需要同时传递两个参数，也可以使用jQuery，求可行解决方案。

相关代码 #

<select id="plan-id" name="planCode"
     hx-get="change.html?planCode=&durationCode=" hx-trigger="change" hx-target='#rental-id' hx-indicator=".htmx-indicator">

     <option value="A">Plan A</option>
     <option value="B">Plan B</option>
     <option value="C">Plan C</option>
</select>

<select id="duration-id" name="durationCode">
<option value="1">1 Years</option>
<option value="2">2 Years</option>
<option value="3">3 Years</option>
</select>

尝试的无效代码 #

我试了下面的代码，但没生效，尽管HTMX日志显示正常，请问哪里出错了？

document.getElementById('plan-id').addEventListener('change', function () {
      const selectedPlan = this.value;
      const selectedDuration = document.getElementById('duration-id').value;
      const url = `change.html?planCode=` + encodeURIComponent(selectedPlan) + `&durationCode=` + encodeURIComponent(selectedDuration);
      this.setAttribute('hx-get', url);
      htmx.logAll();
      htmx.trigger('#plan-id', 'get', { url: url });
    });

解决方案 #

一、HTMX原生方案（推荐） #

你之前的代码绕了弯路，HTMX自带hx-include属性可以直接指定要包含的表单元素，触发请求时会自动把这些元素的参数都加入URL，完全不用手动拼接：

修改第一个下拉框的代码，添加hx-include="#duration-id"：

<select id="plan-id" name="planCode"
     hx-get="change.html" 
     hx-trigger="change" 
     hx-target='#rental-id' 
     hx-indicator=".htmx-indicator"
     hx-include="#duration-id"> <!-- 新增此行，指定包含另一个下拉框 -->

     <option value="A">Plan A</option>
     <option value="B">Plan B</option>
     <option value="C">Plan C</option>
</select>

如果需要修改第二个下拉框时也触发请求并携带两个参数，给它也加上相同的HTMX配置：

<select id="duration-id" name="durationCode"
     hx-get="change.html" 
     hx-trigger="change" 
     hx-target='#rental-id' 
     hx-indicator=".htmx-indicator"
     hx-include="#plan-id">

<option value="1">1 Years</option>
<option value="2">2 Years</option>
<option value="3">3 Years</option>
</select>

二、jQuery方案 #

如果更习惯用jQuery控制，可监听两个下拉框的change事件，手动拼接URL后调用HTMX的ajax方法发送请求：

首先移除原select上的hx-get、hx-trigger等属性，避免冲突，然后添加以下JS代码：

$('#plan-id, #duration-id').on('change', function() {
    const planCode = $('#plan-id').val();
    const durationCode = $('#duration-id').val();
    const url = `change.html?planCode=${encodeURIComponent(planCode)}&durationCode=${encodeURIComponent(durationCode)}`;
    
    htmx.ajax('GET', url, {
        target: '#rental-id',
        indicator: '.htmx-indicator'
    });
});

你之前代码的问题 #

你那段代码无效的核心原因是：手动修改hx-get属性后立刻触发get事件，HTMX处理get触发器时的参数逻辑会导致你传递的URL和元素属性的URL产生冲突，而且这种手动拼接的方式完全没必要——HTMX原生的hx-include就是专门解决这类多参数携带问题的。

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