如何嵌套选择下拉列表，以不同方式获取主列表和 htmx 的从属列表？

问题描述

被维护者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 也依赖于 3rd 方 API

解决方法

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

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

因此，您向第二个下拉列表添加了一个触发器，该触发器侦听 changed 下拉列表上的 #makes 事件，然后向 /models URL 发出请求，包括#makes 下拉菜单，以便您了解要返回的模型。

这看起来像你想要的吗？