如何拥有嵌套的 select 下拉列表，该下拉列表将以不同方式获取主列表和 htmx 的从属列表？

Question

维护者requested在此处重新发布

问题

在https://htmx.org/examples/value-select/

我可以看出 make 直接在 html 中，当它发生变化时，会调用 hx-get 来获取新的模型列表。

如果我想让 make 和 model 都依赖于 ajax 怎么办？

意思是说

            <select name="makes" id="makes" hx-get="/makes" hx-trigger="load">
                <option value="none">original</option>
            </select>
            <select name="models" id="models">
                <option value="none">original</option>
            </select>

我希望能够在加载时从 /makes 获取制造选项列表

然后我也可以用某种方式填充依赖模型。

我不介意将其作为两个请求进行。原因是在我的情况下 makes 也依赖于第三方 API

Answer 1

我希望我明白你想要什么，但这样的事情应该有效：

     <select name="makes" id="makes" hx-get="/makes" hx-trigger="load">
       <option value="none">original</option>
    </select>
    <select name="models" id="models"
            hx-get="/models" 
            hx-trigger="changed from:#makes"
            hx-include="#makes">
      <option value="none">original</option>
    </select>

因此，您向第二个下拉列表添加一个触发器，用于侦听 #makes 下拉列表中的 changed 事件，然后向 /models URL，包括 #makes 下拉列表的值，以便您知道 return.

的型号

这看起来像你想要的吗？

如何拥有嵌套的 select 下拉列表，该下拉列表将以不同方式获取主列表和 htmx 的从属列表？

How to have nested select dropdown that will fetch differently for the main list and the dependent list for htmx?

htmx

问题