代码之家 › 专栏 › 技术社区 › Benjamin Oakes

在HTMX中,如何为select表单元素中的每个选项请求特定的URL?

htmx html-select html

0

Benjamin Oakes · 技术社区 · 5 年前

我正在使用 HTMX 我想喝一杯 <select> 表单字段,该字段自动将特定URL加载到 <div> .

这个 "value select" example 与此想法类似,但它包含值作为查询参数,例如 /models?make=audi . 我想使用一个特定的网址为每一个 <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>

然而,这不起作用,我无法找到一种方法来实现我所描述的。我怎样才能达到期望的行为?

编辑: Related Twitter thread

0 回复 | 直到 5 年前

1

3

Benjamin Oakes 5 年前

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

2

-1

unigg 5 年前

load the external page into iframe using javascript

或者使用Ajax将加载的内容附加到 <div id="models"></div>