如何将select2元素的选中值作为参数传入htmx？

你需要将Select2的选中值作为查询参数传递给HTMX发起的GET请求，以下是几种可行的解决方法：

方法一：利用HTMX原生hx-include（最简单） #

Select2会自动同步选中值到原生<select>元素，只要给原生select设置name属性，HTMX的hx-include就能自动将其作为查询参数携带：

修改你的HTML代码：

<!-- 给select添加name属性 -->
<select id="filter" name="filter">...</select>
<select id="filter2" name="filter2">...</select>

<button hx-get="{% url 'filter-data' %}" hx-trigger="click" hx-include="#filter, #filter2" hx-target="#targetDiv">Filter</button>

<script>
$(document).ready(function () {
    $('#filter').select2()
    $('#filter2').select2()
})
</script>

点击按钮时，HTMX会自动将选中值拼接成查询参数，请求URL会变成类似/filter-data?filter=选中值1&filter2=选中值2的形式。

方法二：用hx-vals动态传递参数 #

如果需要自定义参数名或处理更复杂的取值逻辑，可以通过hx-vals结合JS动态获取Select2选中值：

<select id="filter">...</select>
<select id="filter2">...</select>

<!-- 用hx-vals指定要传递的参数 -->
<button hx-get="{% url 'filter-data' %}" hx-trigger="click" 
        hx-vals='js:{filter_key: $("#filter").val(), filter2_key: $("#filter2").val()}' 
        hx-target="#targetDiv">Filter</button>

<script>
$(document).ready(function () {
    $('#filter').select2()
    $('#filter2').select2()
})
</script>

这里filter_key和filter2_key是自定义的参数名，HTMX会将它们作为查询参数附加到GET请求中。

方法三：手动更新请求URL（适合自动触发场景） #

如果需要在Select2选中变化时自动更新请求URL甚至触发请求，可以监听Select2的change事件：

<select id="filter">...</select>
<select id="filter2">...</select>

<!-- 给按钮添加id用于JS操作 -->
<button id="filterBtn" hx-get="{% url 'filter-data' %}" hx-trigger="click" hx-target="#targetDiv">Filter</button>

<script>
$(document).ready(function () {
    $('#filter, #filter2').select2().on('change', function() {
        // 获取选中值
        const filterVal = $('#filter').val() || '';
        const filter2Val = $('#filter2').val() || '';
        // 构建带参数的URL
        const newUrl = `{% url 'filter-data' %}?filter=${filterVal}&filter2=${filter2Val}`;
        // 更新按钮的hx-get属性
        $('#filterBtn').attr('hx-get', newUrl);
        
        // 如果需要选中后自动触发请求，取消下面注释
        // $('#filterBtn').trigger('click');
    });
})
</script>

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