2

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

“值选择”示例与此想法类似，但它包含作为查询参数的值，例如/models?make=audi. 我想为每个使用一个特定的 URL <option>。

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

<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>

但是，这不起作用，我无法找到实现我所描述的方法。我怎样才能达到预期的行为？

编辑： 相关推特线程

4

2 回答 2

5

我在 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>
于 2021-06-20T18:29:26.343 回答
-1

您使用 javascript 将外部页面加载到 iframe

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

于 2021-06-20T04:54:35.167 回答