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

Question

场景：

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

尝试：

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

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

谢谢，

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

Input.html： http://play.golang.org/p/wM7EpPdXuM

Inner.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 onchange) and you populate the list from the results.

细化#2：从 AJAX 调用结果中填充列表

您也有两种选择：

• AJAX 调用返回 HTML 调用，您可以简单地使用它来替换 HTML <select> 标记的内部 HTML。

• 或者 AJAX 调用可能只返回数据（例如使用 JSON 编码），并且 Javascript 代码可以构建列表的内容。

AJAX 返回 HTML

AJAX 调用可能会返回需要替换为 <select> 的内部 HTML 的完整 HTML 代码。要在服务器端实现这一点，您可以创建/分离仅负责生成此 HTML 代码的 HTML 模板，例如：

{{define "innerList"}}
    {{range .}}
        <option value="{{.Key}}">{{.Text}}</option>
    {{end}}
{{end}}

你只能像这样执行这个模板：

// tmpl is the collection of your templates
values := ... // Load/construct the values
tmpl.ExecuteTemplate(w, "innerList", values)

这里的values 是以下结构的一部分：

type Pair struct {
    Key string
    Text string
}

使用 Javascript 构建 <select> 内容

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> 标签。