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

Question

我想使用查询参数执行 GET 请求。但是，查询参数需要从 select2 元素中获取。如何将 select2 的选定值传递给 htmx？

下面是我的代码的简化概述。

<select id="filter">...</select>
<select id="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>

我尝试寻找类似的问题，但没有找到。任何指针表示赞赏。

Answer 1

愚蠢的我，没有包含参数，因为 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>