如何使用 golang 的模板实现级联下拉菜单

Question

设想：

我有一个级联场景，其中第二个下拉列表中的值取决于第一个。我有三个模板“布局”、“输入”和“内部”。

试图：

我正在对“输入”模板中第一个下拉列表的更改进行 ajax 调用，并坚持处理返回的响应。目前我找到了一种通过替换第二个下拉列表的 html 来修复它的方法。但是，我认为这不是更好的处理方式。我想要一些不需要修改 html 的渲染模板。

请帮助以更好的方式完成任务或指向一些维基。只有标准库

谢谢，

Layout.html： http : //play.golang.org/p/LikKy6rf3-

输入.html： http : //play.golang.org/p/wM7EpPdXuM

内部.html： http : //play.golang.org/p/xFpInKZfFT

Main.go : http://play.golang.org/p/cxtJU-Lhi1

Answer 1

在更高级别上，您有 2 个选择：要么发送下拉列表的所有值（例如作为树），并在更高级别的下拉列表更改时更改第 2 和第 3 级的值（适用于小列表，不适合大型数据集）Or the one you chose: when selection changes, you make an AJAX call (triggered from&nbsp;onchange) and you populate the list from the results.详细说明 #2：从 AJAX 调用结果填充列表您还有 2 个选项可以执行此操作：AJAX 调用返回 HTML 调用，您可以简单地使用它来替换 HTML<select>标记的内部 HTML&nbsp;。或者 AJAX 调用可能只返回数据（例如使用 JSON 编码），并且 Javascript 代码可以构建列表的内容。AJAX 返回 HTMLAJAX 调用可能会返回需要替换的完整 HTML 代码作为<select>.&nbsp;为了在服务器端实现这一点，您可以创建/分离仅负责生成此 HTML 代码的 HTML 模板，例如：{{define "innerList"}}&nbsp; &nbsp; {{range .}}&nbsp; &nbsp; &nbsp; &nbsp; <option value="{{.Key}}">{{.Text}}</option>&nbsp; &nbsp; {{end}}{{end}}您只能像这样执行此模板：// tmpl is the collection of your templatesvalues := ... // Load/construct the valuestmpl.ExecuteTemplate(w, "innerList", values)这values是以下结构的一部分：type Pair struct {&nbsp; &nbsp; Key string&nbsp; &nbsp; Text string}<select>使用 Javascript构建内容AJAX 调用可能会返回一个 JSON 数据结构，value;text即您<option>自己添加子标签的数组/对列表。要将添加<option>到一个<select>标签：var x = document.getElementById("mySelect");var option = document.createElement("option");option.value = "1234";option.text = "Kiwi";x.add(option);所以基本上你需要做的是删除 的当前子项<select>，迭代作为响应接收的列表，并添加一个<option>由每个子项构造的新标签。