在 HTMX 中，如何为选择表单元素中的每个选项请求特定 URL？

如何解决在 HTMX 中，如何为选择表单元素中的每个选项请求特定 URL？

我正在使用 HTMX 并希望有一个 <select> 表单字段，可以自动将特定 URL 加载到 <div> 中。

"value select" example 与这个想法类似，但它包括作为查询参数的值，例如 /models?make=audi。我想为每个 <option> 使用一个特定的 URL。

这是我认为应该工作的近似值。

<select name="make" hx-target="#models">
  <option hx-get="/models/audi">Audi</option>
  <option hx-get="/models/toyota">Toyota</option>
  <option hx-get="/models/bmw">BMW</option>
</select>

<div id="models">
  <!-- hx-get results would go here -->
</div>

但是，这不起作用，我无法找到一种方法来实现我所描述的内容。我如何才能实现所需的行为？

编辑： Related Twitter thread

解决方法

我有 a conversation on Twitter 并得出结论，这还不存在。

我最终使用了 htmx:configRequest，产生了这个可重用的 JavaScript，这对于回馈 HTMX 库可能是有意义的。

    document.body.addEventListener("htmx:configRequest",function (event) {
      let pathWithParameters = event.detail.path.replace(/:([A-Za-z0-9_]+)/g,function (_match,parameterName) {
        let parameterValue = event.detail.parameters[parameterName]
        delete event.detail.parameters[parameterName]

        return parameterValue
      })

      event.detail.path = pathWithParameters
    })

这是一个如何使用它的例子：

    <select name="make" hx-get="/models/:make" hx-target="#models">
      <option name="audi">Audi</option>
      <option name="toyota">Toyota</option>
      <option name="bmw">BMW</option>
    </select>

,

你load the external page into iframe using javascript

或者使用 Ajax 根据选定的值将加载的内容附加到 <div id="models"></div>。