使用 htmx 发送两个输入值的组合

Question

我正在编写一个简单的网站Django，我决定尝试在客户端使用htmx库来加载 html 片段。现在我想按不同字段对列表进行升序和降序排序。我有这样的事情：

<div class="col-auto">
  <div class="input-group input-group-sm">
    <select id="np-sort-key" name="key" class="form-select">
      <option value="publish_date" selected>Publish date</option>
      <option value="title">Title</option>
    </select>
    <button class="btn btn-outline-dark" type="button">
      <span class="bi bi-sort-down"></span> <!-- bi-sort-up for Asc icon -->
    </button>
  </div>
</div>

我想将order_by=<order><key>查询参数添加/替换到当前网址（例如 /articles?page=2&order_by=-publish_date。），并在“选择”更改和“按钮”单击时将其发送回 Django 视图。端点返回一个 Html，我想用 Htmx 将它与另一个 Html 节点交换。（请注意，单击按钮时应更改跨度类以显示排序是 Asc 或 Dsc）

可以使用吗htmx？如果没有，欢迎使用简单的 Javascript 解决方案。

Answer 1

你可以这样解决：

你用

<form hx-get="..."> 
 ...
 <input type="hidden" name="order_by">
</form>

然后你可以向用户显示一个漂亮的图标用于排序。如果用户点击图标，您将通过 JS 更新隐藏的输入。