javascript - 使用 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>在当前 url 中查询参数(例如/articles?page=2&order_by=-publish_date。)并在“选择”更改和“按钮”单击时将其发送回 Django View 。端点返回一个 Html 我想用 Htmx 将它与另一个 Html 节点交换。 (请注意，单击按钮时应更改跨度类以显示排序是 Asc 或 Dsc)

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

Answer 1

你可以这样解决:

你用

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

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