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

Posted 2023-05-07

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

【英文标题】：In HTMX, how do I request a specific URL for each option within a select form element?

【发布时间】：2021-09-04 04:29:06

【问题描述】：

我正在使用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

【问题讨论】：

我知道已经很晚了，但是您是否尝试在选择标签上添加hx-boost？

【参考方案1】：

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

【讨论】：

感谢您分享您的解决方案！

没问题！我希望尽快为 HTMX 做一个 PR。

我正在寻找一种方法来使用我的 URL 中的参数进行 HTMX 请求，这似乎是当前的方法。我的正则表达式技能很糟糕，所以我需要一点时间来建议修复，但如果请求 URL 包含端口值 - 即 127.0.0.1:5000 - 这也会尝试解析端口并且它会中断。

@BenjaminOakes 我可能会建议用<param> 之类的参数括起来而不是冒号。这遵循 Flask 样式参数。

【参考方案2】：

你load the external page into iframe using javascript

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

【讨论】：

这似乎没有回答使用 HTMX 的问题